<% user.full_name %>
<% util.level ? util.level.title : '' %>
Explorer Pioneer Apollo Viking Voyager Pathfinder Orion
Points
<% user.points ? user.points.toLocaleString() : 0 %>
Badges
<% util.badgeCount %>
Streaks
Congratulations You've <% util.newestBadge.isCurriculum ? 'completed' : 'earned' %> the
<% util.newestBadge.title %> <% util.newestBadge.isCurriculum ? 'curriculum' : 'badge' %>!
previous
next
Share to Social Media
Linked In Facebook
Status
<% util.level ? util.level.title : '' %>
<% util.level ? util.level.points : '' %>
<% util.nextLevel ? util.nextLevel.title : '' %>
<% util.nextLevel ? util.nextLevel.points : '' %>
Level up! <% util.levelPointsRemaining %> points to go
Level up! <% util.levelPointsRemaining %> points to go
Badges
Completed Hitchhikers Track Completed Content Track Completed Pages Track Completed Page Builder Track Completed Search Backend Track Completed Search Frontend Theme Track Completed Search UI React Track Completed Solution Templates and the Admin Console Track Completed Technical Skills Track Completed Platform Basics Track Completed Listings Track Completed Reviews Track Completed Industry Overview Track Completed Analytics Track Completed Industry Overview & Product Basics Track Completed Multi-Language Experiences Track Completed Chat Track
<% util.expandBadges ? 'Less' : 'More' %>
Playground Accounts
New +
No Playground Accounts
Create Playground +
View Profile
Log Out loading
Mission Complete! 🚀
Congratulations, you’ve completed your first module!

We hope you enjoy exploring the rest of the site. Please don’t forget to leave us feedback - we are constantly looking to improve. Happy Hitchhiking!
Home
Welcome to Hitchhikers! 👋
To learn more about the platform we encourage you to get started by completing the Hitchhikers Program Track and earning your first badge!
Start Here
Close notification
Adding HTML Modules
Arrow Back
Unit 1
Overview of the HTML Module in Page Builder
completed
Unit 2
Common Use Cases for HTML Module
completed
assessment assessment
Module Assessment
completed completed
home

Module Assessment | Yext Hitchhikers Platform

loading
You must include a first name and last name in your profile to create challenge environments.

Background

Turtlehead Tacos has two main revenue streams:

  1. Guests coming to the restaurant to dine-in or take out
  2. Guests calling or ordering online for delivery

For dine-in, Turtlehead Tacos relies on OpenTable for reservations. They want to add the OpenTable widget to the restaurant pages so they can drive more bookings.

For Delivery, they’ve been getting a lot of complaints and want to add an Announcement Bar to their site, across all their location pages. This would be a section that contains text and, when clicked, directs to their corporate delivery page.

Assume there aren’t existing modules for what Turtlehead Tacos wants to do. How would you create these in Page Builder using the HTML module?

Your Challenge

  1. Navigate to your Restaurant template in Page Builder. Add an ‘HTML’ Module for the OpenTable widget.
  2. Rename the HTML module “OpenTable Widget” (click on the pencil on the Module name to rename).

  3. Drop in this HTML:

    <script type='text/javascript' src='//www.opentable.com/widget/reservation/loader?rid=412810&type=standard&theme=standard&iframe=true&domain=com&lang=en-US&newtab=false&ot_source=Restaurant%20website'></script>

  4. Click Save

  5. Update the HTML so that theme=wide so that it takes up more horizontal space.

  6. Click Save

  7. Move the OpenTable Widget above the footer.

  8. Click ‘Add Module’ and add a second HTML module to display an announcement. Give this module the display name of “Delivery Disclaimer”.

  9. Move this module below the ‘Navigation Bar with Yext Search Bar’ module.

  10. Write HTML to create the Delivery Disclaimer.

    • Text should be: All issues with orders placed via 3rd party apps should be resolved through that vendor.
    • Clicking on that text should direct them to another webpage - https://turtleheadtacos.com/delivery-partners.

Here’s what this would look like: Announcement Bar

You can also play around here (note that the styling will be different - but you’ll learn more about styling in your CSS training!):

CopyCopied!
<div> </div>

Don’t worry - you’ll learn how to use CSS to style your HTML soon!

Module Assessment
+<% util.points %> points
loading
Weekly Challenge Streak Weekly Challenge Streak: <% util.streakWeekly %>
You must include a first name and last name in your profile to create challenge environments.
Challenge account expires in <% util.expirationHours > 24 ? Math.round((util.expirationHours * 1.0) / 24) : util.expirationHours %> <% util.expirationHours > 24 ? (Math.round((util.expirationHours * 1.0) / 24) == 1 ? 'day' : 'days') : (util.expirationHours == 1 ? 'hour' : 'hours') %>.
Challenge account has expired. Please create a new account.
Report Card
Add an HTML module for Open Table widget
Add an HTML module for Delivery Disclaimer
Common Issues
Do you have extra spaces in your syntax? expand/collapse module
If you’re getting an error on the Delivery Disclaimer HTML module, make sure that your syntax is super tight without extra spaces. For example, make sure if you have a <div> you aren’t adding extra spaces like < div > or specifying your <a href= as <a href =. While not technically wrong, we recommend keeping tight syntax to avoid errors.
Are you using single quotes instead of double quotes? expand/collapse module
If you’re getting an error and you have single quotes (‘) instead of double quotes (“), trying replacing with double quotes.
Previous Submissions
Attempt #<% submission.attemptNumber %>
<% submission.date %>
Score: <% submission.numericScore %>
Pending
Feedback
<% elem.innerText %>