GuidedTrack Question Add Ons (1) GuidedTrack Docs

Question Add-Ons 🔗

There are several other interesting ways you can modify a question.

Adding an *icon 🔗

You can add pieces of flair to multiple choice and checkbox questions, like this:

Adding an *icon (1)

To add an icon to an answer choice, find the icon you like from either this link (called Glyphicon icons):

https://getbootstrap.com/docs/3.3/components/#glyphicons

OR, this link (called Font Awesome, of "fa" icons):

http://fontawesome.io/icons/

To add either a Glyphicon icon or a Font Awesom (fa) icon, you indent the keyword *icon beneath the answer option and type in the type of icon ("glyphicon" or "fa"), followed by a dash and the name provided on the site where you got it from. Like this: 

*question: Yay!
	Cake!
		*icon: fa-birthday-cake
	Beer!
		*icon: fa-beer
	Sleeping!
		*icon: fa-bed
	A glyphicon cloud icon!
		*icon: glyphicon-cloud

Note: You can also add unicode characters in your text, questions, or answer options, which can act like little mini icons right in the text. You can copy and paste the images directly into GuidedTrack and can find heaps of unicode characters here: https://www.fileformat.info/info/unicode/char/search.htm

Here's an example of using unicode characters:

*question: Are you a 🐲 or on 🔥?
	🐲 fits me better
	🔥 is more my style!

Countdown until question automatically advances 🔗

Want to restrict how much time a user has to answer a certain question before they automatically advance to the next page? Enter *countdown .

When you use *countdown , you can set how many .seconds , .minutes , or even .hours a user has to complete your question. The time remaining even displays just above the question like this:

Countdown until question automatically advances (1)

When time is running out, the timer turns red:

Countdown until question automatically advances (2)

The code is pretty simple. Here's an example:

*question: What song best describes your work ethic?
	*countdown: 60.seconds
	*save: answer

*if: answer.size=0
	Too late!
*if: answer.size>0
	You said: {answer}

All you really need to use timers is the *countdown keyword specifying how much time the user can have before the page automatically advances.

But in this example, we also used the *save keyword to store the user's response. We can find out if the user left the question blank by checking the .size of the variable (which gets the character length of the response). If the size is 0, then the user didn't get to type anything in before the question disappeared.

Displaying answer options from a collection of answers 🔗

The *answers keyword works for multiple choice, checkbox, and slider questions.

Consider this scenario: You're lazy and want to type as little as possible in your program. You have to ask your users 10 yes/no/maybe questions in a row. Rather than type the answers each time, you save your answer options to a collection variable and then use *answers , like this: 

>> options = ["yes", "no", "maybe"]

*question: Have you ever seen the rain? Comin' down on a sunny day?
	*answers: options

*question: Do you ever feel like a plastic bag, drifting through the wind, wanting to start again?
	*answers: options

In the above example, users will see each of these multiple choice questions along with the answer options of "yes," "no," and "maybe."

Here's a second scenario: you have a program that allows users to create their "Bucket List," all the things they want to do before they die. It's totes amazeballs. You know that some unimaginative users will come up with two goals though and the over-achievers will have hundreds. At the end of the program, you want to show users their entire bucket list and ask them to select the one thing they'll do first. That's where *answers will come in.

Here's an example:

>> bucketList = []
>> userStatus = "writing"

*while: userStatus = "writing"
	*question: What awesome thing do you want to add to your bucket list?
		*tip: When you're done, just leave this box blank and click "Submit" a final time.
		*save: newIdea
		*blank
			>> userStatus = "done"
		*other
			>> bucketList.add(newIdea)
			Great! Keep going!

Your bucket list is below.

*question: Select the one thing you wanna do first:
	*answers: bucketList
	*save: firstThing

Awesome! Now get out there and {firstThing}!

In this program, the *while keyword allows the user to add as many things to their bucket list as they want, until they leave the box blank. Each of their ideas is added to a collection called bucketList . When they finish, they see a question that asks for the goal they want to achieve first, and they see a multiple choice list of all their bucket list ideas.

Next: