loading

Module Assessment| Hitchhikers Platform

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

Background

You want to create a job search experience for your jobs site. You’re going to create a separate experience because you want to really customize this to your jobs site.

At the same time, you’ll add your job vertical to your main search experience as well.

Don’t remember how to create a new experience? See these units for step by step instructions on creating a frontend and a configuration from scratch.

Before you start this challenge, make sure you’ve completed all of the modules in this track. The instructions are meant to challenge you and will provide less detail at each step than in the feature-specific modules. Don’t hesitate to reference past modules if you’re stuck or can’t remember!

Your Challenge

Update your Existing Experience

  1. Add the jobs vertical in your existing Answers experience Search Configuration either using the UI or using the JSON code editor. Use the verticalKey “jobs”, add the API name and name the vertical “Jobs”. Include the following as searchableFields:

    • Name (name) as Text Search
    • Entity Type (builtin.entityType) as NLP Filter
    • Employment Type (employmentType) as NLP Filter & Text Search
    • Keywords (keywords) as Text Search
    • Built-in Location (builtin.location) as NLP Filter
    • Job Department (c_jobDepartment) as NLP Filter
  2. Navigate to your JSON editor and update the universal prompts to include a prompt for jobs – you should have seven or more prompts now. Make sure to also add a vertical prompt for the embedded prompt type “open jobs in [[c_jobDepartment]]”. This will make sure that all of the open positions by department dynamically appear on the Jobs vertical search page.

  3. Navigate to Pages > Sites > Turtlehead Tacos Answers. Click into View Code Editor and click on the Master branch. Use Jambo commands to create a new Vertical (Add Vertical) in the frontend:

    • Add the Page Name as “jobs”
    • update verticalKey - this should be the same as the verticalKey in your Search Configuration. Open up your Search Configuration in a separate tab to verify.
    • Use the card template “job-standard” - this will use the Job card built in to the theme
    • Add the Page Template “vertical-standard”
  4. Configure the config > jobs.json file properties

    • Update the pageTitle to “Job Search”
  5. Verify your changes using Live Preview.

  6. Commit your changes, monitor the build and publish your site to staging.

Create a New Experience for the Careers Site

As we covered in the Creating a Vertical End to End module, there are 3 steps to creating a new vertical (and by extension a new experience):

  • Make sure the data is in the Knowledge Graph
  • Create or Update the Search Configuration
  • Create or Update the Frontend

Now you want to create a brand new experience just for Jobs and FAQs. Good news is, you already updated the Knowledge Graph in the Knowledge Graph Final Challenge to add the jobs and custom fields. In this challenge, you’ll focus on creating a new experience and creating a new frontend.

  1. Navigate to Answers > Experiences. Click on the breadcrumb in the top left for “All Experiences” and then click the button to “Add Experience”. Create a new Search Configuration and call it “Jobs Answers” with an Experience Key of “jobs-answers” (note: make sure the experienceKey is “jobs-answers” with the dash exactly).

  2. Check off only Jobs and FAQs for your Entity Types (uncheck the rest).

  3. Review the Searchable Fields. If there are any missing, add them by clicking on +Add / Update Fields. If there are any extra ones, uncheck them to remove.

    For Jobs, you want to have:

    • Name as Text Search
    • Entity Type (builtin.entityType) as NLP Filter
    • Employment Type as NLP Filter & Text Search
    • Keywords as Text Search
    • Built-in Location as NLP Filter
    • Job Department (c_jobDepartment) as NLP Filter

    For FAQs, you want to have:

    • Question as Semantic Text Search
    • Keywords as Text Search
    • Entity Type (builtin.entityType) as NLP Filter
  4. Click Save to create your experience. Try running a few searches in the Preview to make sure it’s working.

  5. Create a saved search for FAQs that only includes FAQs that:

    • Have Active on Answers = Yes
    • Keyword includes “career”
    • Fields with data includes “Answer”
    • Call the filter FAQs on Answers - Jobs
  6. Update the FAQ vertical with the saved search.

  7. Save your Search Configuration. If you are running into any errors saving and you’re using the code editor, double check to see if you have any red errors or underlines in your file to find your issue.

  8. Navigate to Pages > Sites > Turtlehead Tacos Jobs. This is the site you made in the Pages Final Challenge for your jobs landing pages. You’ll also use this for your search experience.

  9. Create a new repo in your jobs site and call it jobs-answers.turtleheadtacos-[accountId].com, for example: “jobs-answers.turtleheadtacos-2499431.com”.

    • It is important that you do this EXACTLY with your account ID so that we can accurately grade your experience.
    • You can find your account ID by looking in the URL or by navigating to Personal Settings and finding the Account ID field.
    • Once you’ve entered a name, select the Answers Jambo Template to start.
  10. Since this is your first time creating a new site with Custom Development pages, you’ll need to set the username / password for the site in Site Settings, which you can access from the Pages > Sites > Turtlehead Tacos Jobs screen by clicking on Site Settings. To be consistent with the other sites for Turtlehead Tacos, let’s use a username of “test” and a password of “test”.

  11. Click into the Code Editor and select the master branch.

  12. Update the locale_config.json with your experienceKey from Step 1. Keep the default language set to “en”.

  13. Using Jambo Commands, add 2 new verticals:

    • Jobs: name it “jobs”, add vertical-standard template, and use the job-standard card template
    • FAQs: name it “faqs”, add vertical-standard template, and use the faq-accordion card template
  14. Navigate to the config > json files for your 2 new pages. You decide you want icons for your jobs experience, even though you didn’t use them for your main experience. For both pages:

    • Update the pageTitle with “Job Search” and “FAQ Search” respectively.
    • Comment in and update the icon with “briefcase” and “callout” respectively.
  15. Using Jambo Commands, add your Universal page (Add Page).

    • Use the Universal-Standard page template
    • Name it “index”
    • Update the pageTitle to “Turtlehead Job Search”
  16. Use Live Preview to preview your changes. You might see a page with Desktop/ files. Trying clicking out of the code editor and wait for the build to be completed and refresh the page. Also, if you try to use Live Preview before you create your index page, you’ll need to navigate to Desktop > jobs.html or faqs.html directly.

  17. You decide you want to change the mappings for the Job card. Add a new card, forking the job-standard card. Name it “joboverride”.

    • Update CTA1 URL to ‘http://careers.turtleheadtacos.com' – only until your job landing pages are ready to go
    • Update subtitle to combine the c_jobDepartment field and the employment type field so the end result on the card looks like this: “[jobDepartment] | [employmentType]“, e.g., “Marketing | Full Time”.

    Hint: You can concatenate items together using +. Try field1 + ‘ | ’ + field2.

  18. Update the config > jobs.json file to use the new cardType you just created.

  19. Update the branding for Turtlehead. Like you did for the restaurants. Go to the static > scss > answers-variables.scss file and add:

    • --yxt-color-brand-primary to #32a85e
    • --yxt-color-text-primary to #373a3c
    • --hh-answers-background-color to #efefd4

    Preview your changes to make sure things look okay.

  20. Commit your changes and monitor the build for any issues.

  21. Add a domain to your site.

    • Go to Pages > Sites > Turtlehead Tacos Jobs and click on the dropdown to Select Domain.
    • Click + Create New Domain
    • Select JavaScript Snippet integration option
    • Use the domain format “jobs-turtleheadtacos-[accountId].com”. It’s important that you use this exactly. Like with the repo name, you can find the account ID in your URL or in Personal Settings.
    • Select “Yes” to provision HTTPS
    • Click Finish
    • Read the additional message and then click Continue
  22. Now that you have a Domain assigned you can publish your experience. Go to your staging environment and click New Publish. Select the “master” branch and click Continue. Monitor the publish of your experience.

  23. Go to the staging URL and run at least 10 searches.

  24. After identifying some good queries, go to your Jobs Answers JSON Search Configuration and add a universalPrompts object within querySuggestions and add at least 3 prompts. Make sure they highlight both jobs and faqs. Ensure that the prompts are showing up in “Experience Preview” or live preview.

        "querySuggestions": {
          "popularQueriesBlacklistedTerms": [],
          "universalPrompts": [
            "INPUT PROMPT 1",
            "INPUT PROMPT 2",
            "INPUT PROMPT 3",  
          ]
        },

Not seeing your prompts show up? Remember to check your configuration labels under “Deployment” and ensure that your PRODUCTION label is set to latest. The indexing can also take a few minutes.

  1. Set the query status and the entity relevancy for at least 10 queries in the Search terms page.

  2. Make at least 3 improvements to your experience, either in terms of the UI or the search quality. Use the feedback form in the bottom right of the screen (thumbs up icon) to let us know what you did and show off your work.

  3. Make sure the config labels are up to date and publish your experience that you made from scratch!.

Congrats, you did it! You built your own Answers experience end to end

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 searchable fields to the Jobs vertical in the main config
Add Jobs page to the main experience and update verticalKey, pageTitle, and cardType
Add a universal prompt and vertical prompt to query suggestions for the Jobs vertical in the main experience
Add new Search Configuration for Jobs
Add Jobs vertical to the Jobs config
Add searchable fields to the Jobs vertical in the Jobs config
Add FAQ vertical and searchable fields to Jobs experience
Update the locale configuration with your experienceKey and locale
Add Jobs vertical page to the Jobs experience
Add FAQs vertical page to the Jobs experience
Add custom job card to the Jobs experience
Add 3 universal prompts to query suggestions for the Jobs experience
Common Issues
Common CSS Syntax Issues expand/collapse module
  • 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

Configuration changes not saved or showing a message that there are no changes? expand/collapse module

This is likely because you included an object that was not recognized and the Yext system is removing it from the config and saving any other changes.

If you’re adding something that is top-level, like the synonyms or autocomplete objects, make sure it’s not nested inside of a vertical. Conversely, if you’re adding a searchable field or a saved filter, make sure it is nested appropriately.

Do you have an error for adding searchable fields? expand/collapse module
Here are some things to double check:

  • Did you include all of the fields specified in the challenge? Double check!
  • Did you specify the right type (e.g, nlpFilter vs. textSearch) for each one?
  • Do you have proper comma and quotation syntax for JSON? Look out for red underline and indicators on your scroll bar for errors.
Are you seeing blank search results when you preview your changes? expand/collapse module
Here are some things to double check:

  • Inspect the page and check the console. See whether there are any helpful errors and refer back to the Data Mappings & CTAs training to see if you are running across any common errors
  • Make sure that you didn’t delete the experienceKey out of the locale_config.json file by accident
  • Try clicking Update Preview again and look at the Console. Do you see any errors? If not, try doing another hard refresh once the console says it is completed.
Having an issue with your new card? expand/collapse module

Here are some things to double check:

  • Do you have syntax for JS? Look out for red underline and indicators on your scroll bar in the code editor for errors.

  • Are you using any slanted quotation marks instead of straight quotation marks? If you copy and pasted anything that includes quotations, make sure they don’t include any fancy slanted quotations as those are not code-friendly!

  • Make sure you included “profile.” before any fields mapped from Knowledge Graph in your JS. This is telling the system to pull it from the profile. For example, if you want to use the theme custom field, it should be “profile.c_theme” and not “c_theme”

  • If you used double quotes for any hardcoded content, try using single quotes. The graders can be a bit finnicky! In general, you should be consistent with either single or double quotes in your code, but in general we prefer to use single quotes in javascript.

  • Make sure you spelled everything correctly and exactly as specified in the challenge! A computer is grading you on whether you did it right which means (unlike on Instagram) that spelling matters!

  • Make sure the card name is as specified in the challenge and that you properly mapped to it on the [pageName].json file

  • Any formatters you use are spelled correctly. You can find the formatters and you can read about commonly used ones in this unit

  • Space out your code for legibility. This won’t actually change your end result, but it will help others who are reviewing your code (including our auto-graders!). Think about it – which of the following is easiest to read? Hint: the second one!

    `attribute: profile.c_field+profile.c_field+' | '+' Job'`
    `attribute: profile.c_field + profile.c_field + ' | ' + ' Job'`
Getting an error adding your new vertical? expand/collapse module
Here are some things to double check:

  • Did you use the right API name for the type? You can double check these in the Manage Entity Types > View Details screen for a specific type.
  • Do you have proper comma and quotation syntax for JSON? Look out for red underline and indicators on your scroll bar for errors.
  • Did you name the type exactly as specified in the challenge? Also - Casing matters! For example, “communitystories” != “communityStories”! The key is the unique identifier so it’s very important to get it right.
Getting an error for your new Page? expand/collapse module
Here are some things to double check:

  • Do you have proper comma and quotation syntax for JSON? Look out for red underline and indicators on your scroll bar in the Code Editor for errors.
  • Make sure the verticalKey matches exactly (case sensitive) to the verticalKey in your Search Configuration. For example, it should be “faqs” not “FAQs”.
  • There are two places you have to add verticalKey for each vertical page – once in the top level and again in the verticalsToConfig object. Make sure you didn’t forget one of these!
  • Make sure you remove the < and > characters anywhere it says “< REPLACE ME >“. Those are meant to be removed as well!
  • Make sure the Page Names are exactly as specified. For example, it should be “Event Search” not “Events Search”
  • The card names must match exactly the card names in the Theme or in your Cards directory.
Having trouble saving the saved filter ID to Answers? expand/collapse module

There are two common causes:

  1. The syntax is off – the property is called “savedSearchId” (case sensitive) and the filter ID should be encased in quotations (the filter ID can be an alphanumeric string, it’s just that those created in the UI happen to be numeric)

  2. The filter is invalid. Make sure you’re copying a valid filter ID from account settings.

Previous Submissions
Attempt #<% submission.attemptNumber %>
<% submission.date %>
Score: <% submission.numericScore %>
Pending
Splash Loading