Module Assessment | Yext Hitchhikers Platform

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

Background

Now that you have the basic set-up of the Search experience complete, it’s time to ensure that the Turtlehead Tacos branding is present. They’ve given you their home page as a reference to pull in styling from there.

In the end of this module, this is what you want your experience to look like:

205 end state

Your Challenge

Navigate to Pages > Turtlehead Taco Search > Deploys, go to the Code Editor, and click into the master branch. You should expect this to take a couple minutes to load – in the background, it’s starting up a container for your development.
Click “View Live Preview” to open your preview in a new tab.
Run a search for “turtlehead” – this is what it looks like now. Note to yourself how off-brand it is!
Navigate to static > scss > answers-variables.scss. Change the color of the text (--yxt-color-text-primary) to match the color of the paragraph text in the Save the Turtles section at the bottom of the home page .
Preview the change to make sure it looks how you want. (Remember to click out of the code editor to trigger an update, open the Tools > Console to make sure the build completes successfully, and then hard refresh your preview page).
Change the background color (--hh-answers-background-color) to the Turtlehead Tacos light green that is the background of the “Save the Turtles” section of the home page
In answers.scss, update the CTAs to have borders. You want the border to be solid with the primary brand color, some padding and some margin. Add the following code to the answers.scss file inside of the .Answers object:
```
.HitchhikerCTA
{
  border: 1px solid var(--yxt-color-brand-primary);
  padding: 8px;
  margin: 0px 8px;
}
```
Preview the change to make sure it looks how you want.
Click commit and enter a commit message describing what you’re doing.
Monitor the build and publish to make sure it’s successful.
Refresh your search (make sure to do a hard refresh in case your browser has cached the page’s styling).

Module Assessment

+<% util.points %> points

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

Update the primary text color variable

Update the border, padding and margin for the CTA

Update the primary background color variable

Common Issues

Common CSS Syntax Issues

Make sure that each rule ends with a semicolon ;, otherwise the CSS will be invalid
Check that brackets { } are closed, and any nested CSS is properly contained within its parent container
Check that you’re targetting the right class - inspect your preview link to determine what class you should target
Ensure your rule is not being overriden by a more specific rule elsewhere in the CSS

For a refresher on CSS basics, review the Introduction to CSS module

Previous Submissions

Attempt #<% submission.attemptNumber %>

<% submission.date %>

Score: <% submission.numericScore %>

Pending

Feedback

<% elem.innerText %>