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 setup 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. It has been requested for you to update the following:

Brand colors
Map and map pin styling
Fonts

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

Your Challenge

Step 1: Update Brand Colors

Navigate to Pages > Brand 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 . (Hint: hex code is #373a3c).
Check Live Preview to make sure the change was applied correctly. (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 light green that is the background of the Save the Turtles section of the home page . (Hint: hex code is #efefd4).
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 to describe what you’re doing.
Click “Back to Code Editor”.

Step 2: Update Map and Map Pins

Note

In this challenge, we will cover simple map customizations. To learn more about maps and map pins as well as their customizable properties, see the Maps and Map Pins reference documentation.

Open the Live Preview and search for “restaurants” to see how your map appears now on both universal and vertical search.
Navigate to the config > restaurants.json file.
In the verticalsToConfig object, update the mapConfig object to include the following:
- Make sure the Map Provider is MapBox.
- Uncomment the enablePinClustering property in the mapConfig object and set the value to true.

Update the pin background colors to the brand green (#009347) for the default color and light green (#efefd4) for the hovered color. The pin object will look like the below:

"pin": {
  "default": { // The pin in its normal state
    "backgroundColor": "#009347", // Enter a hex value or color for the pin background
    "strokeColor": "#2a446b",
    "labelColor": "white"
  },
  "hovered": { // The pin when it is hovered
    "backgroundColor": "#efefd4",
    "strokeColor": "#172638",
    "labelColor": "white"
  },
  "selected": { // The pin when it is selected by mouse click or through a card click
    "backgroundColor": "#2f4d71",
    "strokeColor": "#172638",
    "labelColor": "white"
  }
}

Preview the change to make sure it looks how you want.
Click commit and enter a commit message describing what you’re doing.
Click “Back to Code Editor”.

Step 3: Update Fonts

In a new tab, get the embed code from Pangolin for font-weight 400 and Roboto Mono for font-weights 400 and 700. Hint: They should look like this:

<link href="https://fonts.googleapis.com/css2?family=Pangolin&display=swap" rel="stylesheet">
<link href="https://fonts.googleapis.com/css2?family=Roboto+Mono:wght@400;700&display=swap" rel="stylesheet">

Open your preview in a new tab and run a search for “Turtlehead” - those fonts are so boring!
Open up the layouts > headincludes.hbs file.
Add the embed codes from Step 1 in the layouts > headincludes.hbs file.
Navigate to static > scss > answers.scss to use the font by adding in under your answers class. You want to add Pangolin for most of the search experience, but the Roboto Mono for the search bar. As a best practice, you’ll want to include ‘Open Sans’ and sans-serif as back-up fonts for both in cases where a browser can’t support your new fonts. For the classes below, add Pangolin, 'Open Sans', sans-serif for font-family:
```
.yxt-Card,
.HitchhikerFaqAccordion-title,
.HitchhikerLocationStandard-title,
.yxt-Results-title, 
.yxt-Results-viewAllLink, 
.yxt-Results-changeFilters, 
.yxt-Results-filterValue
{
  font-family: <INSERT FONT FAMILY NAMES HERE>;
}
```
For the classes below, add 'Roboto Mono', 'Open Sans', sans-serif for font-family:
```
.yxt-AutoComplete-option--item,
.yxt-SearchBar-input
{
  font-family: <INSERT FONT FAMILY NAMES HERE>;
}
```
Use Live Preview to verify the font is working correctly.
Commit your changes.
Monitor the build and review your staging experience.

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 SCSS variable for the primary text color

Update the SCSS variable for the background color

Add SCSS styling for CTAs

Enable map pin clustering for the Restaurants vertical

Update the map pin default color for the Restaurants vertical

Update the map pin hover color for the Restaurants vertical

Add the font embed code to the `headincludes` file

Add SCSS styling for font family

Common Issues

Common CSS Syntax Issues

Make sure that each rule ends with a semicolon (;).
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 that 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

<% elem.innerText %>