Heads up! To view this whole video, sign in with your Courses account or enroll in your free 7-day trial. Sign In Enroll
Preview
Start a free Courses trial
to watch this video
Randomizing the cards the user sees will help them learn the material better. In this video, you'll be challenged to implement that feature!
This video doesn't have any notes.
Related Discussions
Have questions about this video? Start a discussion with the community and Treehouse staff.
Sign upRelated Discussions
Have questions about this video? Start a discussion with the community and Treehouse staff.
Sign up
How did it go?
0:00
Hopefully you were able to at least
work out parts of the solution.
0:01
Let me show you my solution.
0:04
Here's the card.pug template.
0:07
I've entered an anchor element
at the bottom of the page.
0:09
For the href,
the parts of the URL that will
0:12
change from card to card is the id and
the sideToShow.
0:17
I assigned a template
literal to the href and
0:25
added those values in for interpolation.
0:31
The text contents of the link
should either show question or
0:34
answer depending on where
the link is pointing.
0:37
You could have used the same variable
that you used in the query string,
0:42
since it's the same word.
0:46
I wanted mine capitalized,
so I created a new variable
0:49
named sideToShowDisplay to
hold the capitalized text.
0:53
Next, I needed to pass in these
values into the template.
0:59
In cards.js,
I passed in the id to the template data.
1:04
Then, I assign values to sideToShow and
1:12
sideToshowDisplay based on
which side the URL points to.
1:15
If it's the question in the query string,
it should point to the answer.
1:22
Then I added an else if
clause to do the opposite.
1:29
Don't worry if you weren't able
to complete this challenge.
1:37
Coding takes practice, and
practice is what you're getting right now.
1:41
One thing I like to do when something
isn't clicking is to erase it all and
1:46
start over.
1:51
Even though you saw a solution,
1:53
it can still be a challenge to
reimplement something from scratch.
1:55
That process may help you learn.
1:59
Let's do another challenge now.
2:02
This one will combine what you
know about creating routes,
2:05
redirections, route parameters,
and of course JavaScript.
2:08
I'll show you what you'll build.
2:13
In the browser,
when I type the URL slash cards,
2:15
and hit Enter, I'm being redirected
to a specific random card.
2:21
I'll do it again, and
I'm at a different card.
2:28
Giving users a way to study
random cards can help them learn.
2:32
To complete this challenge,
you'll need to create a new route,
2:36
write some logic to find a random card,
and redirect the user to view that card.
2:40
Good luck, and
I'll show you my solution next.
2:45
You need to sign up for Treehouse in order to download course files.
Sign upYou need to sign up for Treehouse in order to set up Workspace
Sign up