The ability to put things in boxes, and optionally make them pretty and clickable, is now here, thanks to *component:
Simple *component
Above, a *component keyword was added to the first sentence. It’s not clickable, but it’s nice if you want to distinguish some content using a box.
The code for adding a simple box around things is:
Multiple lines can be indented beneath *component (following the same level of indentation), allowing images, videos, stories, and more to be contained within a single box.
You can also have multiple components on a single page.
If your an HTML or CSS whiz, *component puts the content inside of an HTML
…
tag, making it easy to style it as a group.
Clickable *component
To make a component clickable, add *click
Above, users can click the box. If they do, they’ll be asked the two questions in sequence. When they finish answering questions they will return to the same screen that originally contained the *component. The whole page with then have its code rerun once the *click is complete.
You could instead redirect users by adding a *goto or *switch keyword as the last part of the *click.
If users don’t click the box, that’s okay, they’ll still see the content that follows after *component.
Making a *component clickable makes the box border a darker color, as the next image shows.
Nested *component
Components can be placed inside of components.
In the above example, there are two components inside of one and both are clickable (hence the darker border around the two inner boxes). The code to have these two clickable, nested components is:
You can use nested *components to allow users to click one of several, optional activities. This is like designing your own custom buttons that look and behave the way you want.
Pretty, CSS-decked *component
Components can be made about as pretty as your imagination and CSS programming skills allow, using *classes.
The image at the top was made using the following built-in Bootstrap CSS classes:
If you embed your program on another website, and you’ve got some bonus skills, then you can add custom CSS stylesheets and classes to make your components especially eye-pleasing.
Count stuff that appears in your text or collection variable
With variableName.count(“thing to count”) you can count up all the times that thing appears in a collection or text variable.
For example, let’s say users are taking your refined quiz, “What puffy snack product are you?” You might count up the values in a collection of their answers like this:
Here are other examples:
Count how many times a user did a particular anxiety-busting activity, in a collection of all activities completed.
Count the number of times a user stealthily added the word “meow” to a story.
Count up the 1s in a collection of 0s and 1s (to get a total score on a true/false quiz).
Count the number of times a letter appears in a variable, as in the below:
Find where something occurs in your text or collection variable
Find let’s you locate things of interest in a collection or variable.
Let’s say you ask your users to rank their top-five favorite food-related feel-good movies in order of their awesomeness. The result produces a collection that might look something like:
If you want to know what rank your user gave The Lunchbox, you could do the following:
You can also use find to:
Locate the position, if any, of certain flagged words in a user’s open-ended response (e.g. “depressed”).
Find out when a user did a task of interest in a collection of tasks they could do in any order.
Find certain symbols or keywords in order to replace them with something else.
The .find function starts searching from the beginning. So if the item in question is the first item, .find will return the number 1. If it’s the second item, it’ll return with 2. If there are multiple entries, in say positions 3 and 5, it’ll just return with the first one it encounters (i.e. 3).
If the item in question can’t be located, it’ll display as blank if inline, or you could do something like the following:
Above, “it wasn’t found!” will display, since there aren’t any z’s in the text searched.
Get all the keys to your association
If you want a collection of all the keys in your association (e.g. all the Polish words for which you have English translations), you can use .keys, like so:
The example above would return, “The words you know are: bee, beetle, book”.
*throwaway the data that you don’t need
Each question answered is stored as a column in the csv automatically. If you don’t want certain questions and their answers stored, you can use *throwaway. This might be handy if:
You’re asking users for personally identifiable information (e.g. their name or email) and do not want this information saved in the csv for privacy reasons.
You’d simply like to keep your csv tidier, and don’t want to store data from questions that are not relevant to you.
You want to reduce the file size of your csv, which could become quite massive if users answer the same, though slightly varied questions repeatedly (and you don’t need to save those responses).
You can also use *save in conjunction with *throwaway to store just one column of answers as opposed to two. (Otherwise, with *save there is one column of answers with the variable name as a header, e.g. userName, and one column of duplicate answers with the question text as a header, e.g. “What’s your name?”).With *save and *throwaway both indented under a *question, the variable name WILL still be its own header in a column with its answers (it will not be thrown away!). However, the question itself will not be directly stored in the csv (i.e. there will not be a duplicate column of answers headed by the question text).
For example,in the program below you want to know how many fruits a person likes out of a list but you don’t need to know which ones in particular they like:
Or let’s say you ask the user for their email address but you’re just going to use it from within the program and do not want it stored in the csv file:
Note that *throwaway can only be used to keep a question – with its answers – from being written in the file, but you need to store temporarily the answer in a variable so that you can use it. Since you cannot throwaway variables, you will need to overwrite it like in the example so that the column with the header “email” has blanks for every run.
Download your program and all its subprograms
You can download your entire program, subprograms and all, as simple text files to store on your computer.
What’s especially great about this is that you can search this backup locally on your computer to find important things, such as all mentions of a certain word.
Of course, it’s also handy to have a backup in case you delete something accidentally from the GuidedTrack version, or want to revert to an old version.
To get your backup, go to your program and click the kebab menu in the top-right, then select “Download code”:
Next, select “Package code”:
When your file is ready, you can download it and save it to your computer.
New visual editor!
Have you noticed GuidedTrack’s editor has gotten a delightful upgrade?
On the left-hand side is the new quick reference tool. It helps you find keywords, get live examples of how to use them, and read more detailed instructions.
Pressing the + button will immediately add a simple example of that keyword in action to your program, which you can then modify to fit your needs.
Pressing on the keyword name opens up editable fields for customization:
If you fill out the fields and click “Insert” you’ll quickly add that element to your program.
You can also press the ? for additional help and information:
The larger help document, with even more detailed explanations of keywords, is still available. Its link has moved to the upper right:
As another bonus, the editor will soon be completely usable on mobile devices!
Using Zapier and IFTTT with GuidedTrack’s *service
There are two awesome tools we want to highlight that you can use with *service to connect your GuidedTrack program to the APIs of hundreds of other apps and services – Zapier and IFTTT.
For example, you could potentially do the following:
Save a date in your Google Calendar or Calendly
Add to-do items to Trello or Todoist
Send important info to Evernote
Show an event via Eventbrite
Show the weather or photos from NASA
. . . and more!
You can also send GuidedTrack variables to a Google spreadsheet, which would mean your sheet would be populated in real time by users taking your program.
There are lots of ways this could be useful, for example:
Easily see your most important data arrive in real time.
Add formulas for to your spreadsheet to do automatic calculations.
There are two awesome tools we want to highlight that you can use with *service to connect your GuidedTrack program to the APIs of hundreds of other apps and services – Zapier and IFTTT.
For example, you could potentially do the following:
Save a date in your Google Calendar or Calendly
Add to-do items to Trello or Todoist
Send important info to Evernote
Show an event via Eventbrite
Show the weather or photos from NASA
. . . and more!
As outlined here, you can also send GuidedTrack variables to a Google spreadsheet, which would mean your sheet would be populated in real time by users taking your program.
There are a number of ways this could be useful, for example:
Easily see your most important data arrive in real time.
Add formulas for to your spreadsheet to do automatic calculations.
Efficiently share specific data with others.
The two services covered are:
Zapier: Zapier is a tool that connects multiple apps to each other. The *service keyword will send data to Zapier, which will in turn populate the appropriate columns in a Google spreadsheet. If you want to send data from GuidedTrack to Zapier you will need a Premium account, but currently you can try it for free for 14 days.
If This Then That (better known as IFTTT): IFTTT is another service that connects apps with each other. With IFTTT, you can send user data an unlimited number of times, but you are limited to populating only three columns.
Using Zapier with GuidedTrack (for instance to add a row to a google spreadsheet)
1. Prepare your spreadsheet
Go into google spreadsheets (http://spreadsheets.google.com) and create a new google spreadsheet that will be the one you’re adding rows to via GuidedTrack. Fill in the the first row of this spreadsheet with the column names (for example, “Customer’s name”, “Customer’s age”, “Registered on”, “At”):
2. Write your program
Here you have the sample code to send four variables to Zapier, see how you can use both text and number variables:
>>name="Peter"
>>age=34
>>date="October 15th, 2013"
>>time="9:33 am"
Sending data to google sheets…
*service: zapier
*path: /
*method: post
*send: {"Name" -> name, "Age" -> age, "Date"->date, "Time"->time}
*success
Success!
>>result = it
*error
Failure!
>>result = it
*Response from zapier server*: {result}
*button: Done!
You will now be asked to select a trigger event to start the Zap. Click on the Webhook icon.
Select Catch Hook on Trigger Event and then click on Continue.
Zapier will give you a Custom Webhook URL. Copy it to your clipboard.
Switch to the tab where you have your GuidedTrack program and go the program Settings. Go to the Service tab and create a New Service. Use the URL on your clipboard and name the service zapier. Leave empty all the other fields and save.
Click preview in GuidedTrack to run the code. If you have configured the service correctly, you will see on the screen that the status of the response from Zapier is Success. This means that GuidedTrack is communicating with Zapier.
Go back to the tab or window where you have Zapier to check that it is receiving the data correctly. Click on Continue and then on Test your trigger. It should display the fields Name, Age, Date and Time populated.
GuidedTrack is communicating properly with Zapier, now you will be configuring what Zapier does with the message received from GuidedTrack. Click Continue and select Google Sheets.
Zapier will ask you to choose an action event. Select Create Spreadsheet Row and Continue.
Connect to your Google account (you may have to grant Zapier access to it if you have not done it before). Then, Continue.
Select the Google drive where the spreadsheet is located, the spreadsheet and the tab (worksheet) where the table you created is. Map the data that Zapier receives to the columns of your target table as shown below and Continue.
13. Click on Test & Continue. The following screen should display a message saying that the test was successful. Go to your spreadsheet and check that a row was created:
14. If everything looks right, go back to Zapier, click on Turn on Zap and you’re done!
Using IFTTT with GuidedTrack (for instance to add data to a Google spreadsheet)
Note: when it comes to Google spreadsheets, IFTTT is unfortunately limiting to only adding rows that have no more than 3 columns of data. Use Zapier if you need more than 3 columns.
Step 2: Once past the onboard, type “sheets” in the search/filter box, click on the “Services” tab, and click on Google Sheets
Step 3: Click “Connect” and then set up the connection with your Google Drive / Google Sheets account
Step 4: Click your username in the upper right and choose “New Applet”
Step 5: Click on “this” in the “if this than that” and search “webhooks” in the search/filter then click on it. Then click “Receive a web request”
Step 6: Give it the event name: guidedtrack_data
Step 7: Now click on “that” in the “in the “if this than that” and search Google Sheets and click on it. Then click “Add row to spreadsheet”.
Step 8. Fill in the form to give the spreadsheet a name and choose a path where it will be saved within Google Drive if you like. Leave the “formatted row” unchanged for now. Click “Create action” then click “Finish”.
Step 9: get your webhook key, which you can find here:
Try previewing this program a couple of times to send data to your spreadsheet.
Step 13: Open up google sheets (http://sheets.google.com) and look for a folder IFTTT in your google drive. Go a couple folders deep inside that folder to find your spreadsheet! (unless you edited the path it got saved to, in which case it’ll be located wherever you indicated). If you wish, you can add column headers. You can also remove text you do not need from the GuidedTrack code (such as “Sending data to Google Sheets”).
Doing so is simple with the *picture command added to a *question:
Your answer options must include text (so you can’t have just a picture), but you can include some answer options that don’t have a *picture keyword at all (e.g. adding a text-only option to the above like “Music is dumb”).
Add your logo to logins
If you require users to login to your program (i.e. create a GuidedTrack account so they can maintain their position in your program from multiple devices), you can add your logo to the sign up/sign in page.
From the “Settings” tab, under “General” you’ll see a spot to add your logo. By adding your public name and an email display name, you’ll also ensure that the sign up confirmation email displays your name as well as your logo.
Special note: Users who are logged into your program are now also automatically given a “Sign out” option from the hamburger menu.
Remove “Reset everything” from the hamburger menu
The “Reset everything” option (previously known as “Run again”) provides users a chance for a clean slate on your program. It ends whatever progress they’ve made and allows them to start from the beginning of your program.
However, if your program is a 10-week course on becoming a professional canine couturier, this option could be detrimental to a young pupil on their 8th week toward success who clicks this by accident and is forced to start anew.
To turn off this otherwise handy option, visit the “Settings” tab, click “Run menu,” and then click “Hide”:
Introducing *switch: when the user’s position is in multiple places at once
The new keyword *switch is for the rare program that keeps track of the user’s position in multiple places at once, allowing them to *switch back and forth, or apps that have multiple distinct sections that you want to be able to switch the user back and forth between easily.
For example, let’s again say you have a program that teaches the finery of dog fashion design. There are 10 scintilating lessons, but the user is allowed to take them in any order, and can pause one lesson to switch over to another, then switch back again to finish the earlier lesson up later.
In this scenario, you could use the *switch keyword, and your program could look something like the following:
Above, the user might start in the lesson 1 program, but a navigation placed at the top can be clicked to *switch them to an organizing “home” screen, where they can select a different lesson to *switch into. From there, they can *switch into any of the other lessons, or back again into session 1.
How switch works:
*switch: The name of the program to switch to
*reset (an optional attribute to start off fresh from the top of the program)
As soon as the user hits a *switch command, they are immediately transferred to a different section of your program (and any text that might’ve been on the screen prior to the *switch is not shown, so it’s best to have *switch after a *button or page break).
There are two ways to switch:
*switch with a *reset keyword indented below: users start at the top of the program, any previous progress is wiped out
*switch without a *reset attribute: users resume at their last position within that program – if this is their first time in the program then they start at the top
In our example program, when users *switch to the “home” program, the *reset attribute ensures they start off at the top of that program. When they *switch to a lesson though, since there’s no *reset attribute, they’ll start off wherever they were when they last switched out.
What switches or changes with *switch?
The features below do not persist as a switch is made (so they will disappear from the screen, if present, as a section is left, and reappear if they were previously present on the program being switched into):
*progress
*maintain
*navigation
Any points accumulated stay on the screen between switches. Variables can also be shared across sections.
In a program like our example above, we would have to put a *navigation at the top of each lesson that helps users *switch back into the home page, since *navigation is not something that persists between switches.
What happens at the end of the program the user switched into?
You’ll need to control what should happen when a user reaches the end of a program they’ve switched into. GuidedTrack’s natural response when there’s no further content to display is to assume the run is over, the user’s entire run (i.e., the next time the user opens the program it’ll be as if a “Reset everything” has occured).
For example, at the end of our lesson 1 program, we could include the following to control what should happen next:
Once lesson 1 is complete, the user will be directed to the home screen. If we wanted to prevent users from starting lesson 1 over, the variable “lesson1” that’s been added (stored with the value “done”), could be used to remove this lesson from a list of lessons available to complete.
To sum, whenever a section reaches its end, use *switch to bring the user somewhere else.
Why is *switch superior here to *program?
Switching around willy-nilly would be hard to pull off with the *program keyword alone. The *program keyword runs one program that yearns to be finished, returning the user back to the program that contained the *program keyword. You cannot create a loop where two programs continuously call each other via *program, as GT would grow wearisome and possibly crash.
When a *switch is used, it is not necessary for the user to ever return to the program that called the *switch. Two or more programs could continuously switch back and forth, and GuidedTrack would be completely chill about the whole thing.
In short:
*program – run a program until it completes, automatically continuing on from here when done.
*switch – switch to a program, pausing the current one until *switch is used to come back.
Other times *switch would be useful?
If your app has a “Home” or “Main Menu” where users can adjust settings, or could potentially get several subprograms deep into alternative content, and you want to quickly *switch them back into the main thing they were doing.
If your app has a “Toolbox” or “Homework” that user’s can play around in, and you want to keep track of users’ progress in the various tools.
When you’re developing a traditional app that has a persistent navigation bar, where clicking each navigation icon takes you to a different section of the app, you can use *switch to actually do the switching between the sections. Note that you’ll have to create the *navigation again at the start of each section, since navigation does not persist across sections.
Any other time you use a *program keyword, but the *program you call may not run to its end.
