Feature Update – *component, .count, .find, .keys, *throwaway, and more!

Here’s what’s new:

Component

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.
  • Efficiently share specific data with others.

Get the full lowdown here on connecting Zapier and IFTTT to Google Sheets.