GuidedTrack Blog

Here’s what’s new:

• Add *component
• Count stuff that appears in your text or collection variable
• Find where stuff occurs in your text or collection variable
• Get all the keys to your association
• *throwaway data you don’t need
• Download your program and all its subprograms with a couple clicks
• A beautiful new visual editor
• Using *service with Zapier and IFTTT to integrate with hundreds of other web services

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

*throwaway the data that you don’t need

• 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).

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

New visual editor!

Using Zapier and IFTTT with GuidedTrack’s *service