loading

Module Assessment| Hitchhikers Platform

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

Background

You are ready to spice up your Events and Restaurant cards even more. You’re feeling good about all of the JS you learned so you’re ready to go. This is what you want them to look like:

events card end state restaurant card end state

Your Challenge:

  1. Navigate to Pages > Sites > Turtlehead Taco Answers, 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.

  2. Click “View Live Preview” to open your preview in a new tab.

  3. Run a search for “events” – this is what it looks like now, which is way better than before the last module but you want to make it even more specific to the Turtlehead brand.

  4. You want to customize the Event Card so you’ll need to fork it from the theme. Go to Jambo Commands and select “Add Card”.

    • Template: “event-standard”
    • Name: “eventoverride”

    Jambo will create a new folder in the Cards directory for “eventoverride” with your component.js and template.hbs files.

  5. Navigate to your config > events.json file and update the cardType to “eventoverride”.

  6. Update your Events results by navigating to cards > eventoverride > component.js

    • Instead of “RSVP” as the CTA label for CTA1, change it to “Turtle Up”. This is their way of saying “join us”.
    • You want the “Turtle Up” CTA to open the link in a new tab. Change the link target to “_blank” instead of “_top”.
  7. Click out of code editing and wait for the console logs to say your latest build was successful. Then, go to your live preview tab and refresh the results. Make sure this looks how you want it to.

  8. You want to customize the card for Restaurants. Go to Jambo Commands and select “Add Card”:

    • Template: location-standard
    • Name: “restaurant”
  9. Navigate to your config > restaurants.json file and update the cardType to “restaurant”.

  10. Update your Restaurants results by navigating to cards > restaurant > component.js

  11. You want to add the Restaurant Features field to the card. If you recall from Data Modeling Challenge This includes information like whether the location has live music or is pet-friendly.

    • Comment-in the Services attribute
    • Map to the c_restaurantFeatures field (hint: remove the brackets – since this field is a list-type field, you don’t need them and you don’t need to use any formatters like joinList)
  12. Click out of code editing and wait for the console logs to say your latest build was successful. Then, go to your live preview tab and refresh the results. Make sure this looks how you want it to.

  13. Commit your changes and add a commit message.

  14. Monitor the build and publish to make sure both are successful

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 a new card called eventoverride and update data mappings
Add a new card called restaurant and update data mappings
Common Issues
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'`
Previous Submissions
Attempt #<% submission.attemptNumber %>
<% submission.date %>
Score: <% submission.numericScore %>
Pending
Splash Loading