### Insert optional login with *login and *required: no Source: https://docs.guidedtrack.com/manual/additional-keywords/logging-in Use this syntax to make login optional. Setting *required to no lets users skip logging in and still continue to the next line of text. The example also mentions emailing results, but the email setup is not shown here. ```guidedtrack If you'd like to have the results of your "What type of exotic fruit are you?" quiz emailed to you, please login or create an account on the next screen. Otherwise, you'll only be able to view the results in the program. *login *required: no Thanks, here are your results... ``` -------------------------------- ### Using *placeholder for phone number example Source: https://docs.guidedtrack.com/manual/asking-questions/questionnaire-answer-scales-using-answers Shows an example placeholder for a phone number input. The placeholder disappears when typing begins, so complex instructions should be placed elsewhere. ```GuidedTrack *question: Please, enter your phone number in international format: *placeholder: +1-9999999999 ``` -------------------------------- ### any.text example Source: https://docs.guidedtrack.com/api Returns the value of a variable converted to text. The example assigns the current date to a variable and then converts it to text. ```unknown >> today = calendar::date >> textDate = today.text ``` -------------------------------- ### Good numerical response examples with units Source: https://docs.guidedtrack.com/research-guide/avoiding-bias/numerical-responses Use *type: number with *after or *before to specify units. The first example uses *after: pounds, the second uses *before: $. ```GuidedTrack *question: What is your weight in pounds? *type: number *after: pounds *question: Roughly how much money (in U.S. dollars) did you make last week from your main source of income? *type: number *before: $ ``` -------------------------------- ### Bad numerical response examples without units Source: https://docs.guidedtrack.com/research-guide/avoiding-bias/numerical-responses These examples omit unit specifications, leaving participants without instructions on what units to use. ```GuidedTrack *question: What is your weight? *type: number *question: What is the temperature outdoors right now where you live? ``` -------------------------------- ### Good repetition example using *maintain Source: https://docs.guidedtrack.com/research-guide/avoiding-bias/repeating-instructions Use *maintain to display the same instructions before each question in a set. The instructions remain on screen until *clear is used. This example shows three questions with a single *maintain line. ```GuidedTrack *maintain: Please indicate the extent to which you agree or disagree with the following statement. *question: I am hard to satisfy. *question: I sympathize with others' feelings. *question: I neglect my duties. *clear ``` -------------------------------- ### association.keys example Source: https://docs.guidedtrack.com/api Returns a collection of the keys of an association. The example assigns an association to a variable and then retrieves its keys. ```unknown >> phoneBook = {"Lucas" -> 223142, "Mara" -> 772632, "Sue" -> 883325} >> peopleInPhoneBook = phoneBook.keys ``` -------------------------------- ### any.type example Source: https://docs.guidedtrack.com/api Returns the variable's type. The example assigns a number to a variable and then retrieves its type. ```unknown >> variable = 43.22 >> typeOfVariable = variable.type ``` -------------------------------- ### Invalid formatting examples Source: https://docs.guidedtrack.com/manual/basic-elements-of-a-guidedtrack-program/text-lines Examples that do not work because the spacing rules are violated: no space after the second asterisk, no space before the first asterisk, a space after the first asterisk, or a space before the second asterisk. ```guidedtrack This *won't work*for bold with no space after the 2nd asterisk.This*won't work* for bold with no space before the 1st asterisk.This _ won't work_ for bold with a space after the 1st asterisk.This _won't work _ for bold with a space before the 2nd asterisk. ``` -------------------------------- ### Play audio automatically with *start: yes Source: https://docs.guidedtrack.com/manual/additional-keywords/media Plays the audio file automatically without requiring the user to click a play button. Add *start: yes beneath the *audio line. ```guidedtrack *audio: http://upload.wikimedia.org/wikipedia/commons/f/f8/Scaring_a_cat_away.ogg *start: yes ``` -------------------------------- ### Formatting examples: bold, italic, underline Source: https://docs.guidedtrack.com/manual/basic-elements-of-a-guidedtrack-program/text-lines Examples of formatting text with asterisks for bold, backslashes for italic, and underscores for underline. Each symbol must be placed with a space before the first symbol and after the last, with a character immediately following/preceding. ```guidedtrack This will let you *show some text* in bold.This will let you /show some text/ in italics.This will let you _show some text_ that is underlined. ``` -------------------------------- ### Get character with `variableName[position]` Source: https://docs.guidedtrack.com/manual/additional-keywords/variables Uses square brackets to get the first character of text variables and combines them to form initials. This example extracts the first letter of first and last names. ```text *question: First name *save: first *question: Last name *save: last >> firstInitial = first[1]>> lastInitial = last[1]I'm gonna call you {firstInitial}.{lastInitial}. ``` -------------------------------- ### Build a bucket list and select from it with *answers Source: https://docs.guidedtrack.com/manual/asking-questions/question-add-ons This example shows a program that collects user ideas into a collection using a *while loop, then uses *answers to display the collection as answer options for a final selection question. ```guidedtrack >> 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}! ``` -------------------------------- ### collection.size: Get collection size Source: https://docs.guidedtrack.com/api Returns the number of elements in a collection. The example counts the number of trips in a list. ```unknown >> tripsLastYear = ["Amsterdam", "Madrid", "London", "Amsterdam", "Rome", "London", "Lisbon"]>> totalTrips = tripsLastYear.size ``` -------------------------------- ### Example lesson program using *switch and *navigation Source: https://docs.guidedtrack.com/manual/additional-keywords/switching-users-around-multiple-saved-positions A sample lesson program that uses *navigation to let users switch to a home screen. The *switch command is placed after a *button to avoid losing text. ```guidedtrack -- An example first lesson program.-- (Here *navigation is used to help users get around)*navigation Switch lessons *switch: My program home screen *reset *header: Lesson 1: History of canine accoutrements*button: BeginThe pampered pooches of ancient Egypt... ``` -------------------------------- ### Run multiple experiments with background info and question order Source: https://docs.guidedtrack.com/research-guide/randomizing-groups-and-experiments/multiple-experiments This example shows how to set up multiple experiments in one GuidedTrack program. The first block defines the background information and three questions (Q1, Q2, Q3). The second block creates three experiments (backgroundInfo, Q1Position, Q2and3Order) with groups that set variables, and uses *if statements to conditionally display content and build the question order. The program then loops through the questions, saves answers, and clears the screen. ```guidedtrack >> backgroundInfo = "A large sample of adults in the U.S. were asked how satisfied they were with their life so far. They were given four options: very dissatisfied, somewhat dissatisfied, somewhat satisfied, or very satisfied. This study will ask you to guess which proportion of people gave which answers." >> Q1 = "What proportion of U.S. adults do you think reported being either somewhat or very satisfied with their life?" >> Q2 = "What proportion of U.S. adults do you think reported being somewhat satisfied with their life?" >> Q3 = "What proportion of U.S. adults do you think reported being very satisfied with their life?" ``` ```guidedtrack *experiment: backgroundInfo *group: withBackgroundInfo >> backgroundInfo = 1 *group: noBackgroundInfo >> backgroundInfo = 0 *if: backgroundInfo = 1 {backgroundInfo} *button: I understand. *experiment: Q1Position *group: askQ1First >> askQ1First = 1 *group: askOtherFirst >> askQ1First = 0 *experiment: Q2and3Order *group: askQ2BeforeQ3 >> askQ2BeforeQ3 = 1 *if: askQ1First= 1 >> questionsInOrder = [Q1, Q2, Q3] *if: askQ1First = 0 >> questionsInOrder = [Q2, Q3, Q1] *group: askQ3BeforeQ2 >> askQ2BeforeQ3= 0 *if: askQ1First = 1 >> questionsInOrder = [Q1, Q3, Q2] *if: askQ1First = 0 >> questionsInOrder = [Q3, Q2, Q1] *if: backgroundInfo = 1 *maintain: As mentioned before, {backgroundInfo} >> pairedQandA = {} >> i = 1 *for: questionToAsk in questionsInOrder *question: {questionToAsk} *save: answer >> pairedQandA[questionToAsk] = answer *clear ``` -------------------------------- ### text.size: Get character count Source: https://docs.guidedtrack.com/api Returns the number of characters in a text variable. The example counts the characters in the given sentence. ```GuidedTrack >> myText = "I love going to the movies" >> textLenght = myText.size ``` -------------------------------- ### collection.unique: Get unique values Source: https://docs.guidedtrack.com/api Returns a copy of the collection without duplicate values. The example removes duplicate city names from a list. ```unknown >> tripsLastYear = ["Amsterdam", "Madrid", "London", "Amsterdam", "Rome", "London", "Lisbon"]>> citiesVisited = tripsLastYear.unique ``` -------------------------------- ### Create a collection from scratch Source: https://docs.guidedtrack.com/manual/additional-keywords/collections Shows how to create a collection by assigning a list of items to a variable using the '>>' operator. ```guidedtrack >> myCollection = ["thing 1", "thing 2", "thing 3"] ``` -------------------------------- ### *navigation with *goto to tease Source: https://docs.guidedtrack.com/manual/additional-keywords/page-navigation Example of using *navigation with *goto to redirect users to other parts of the program. The navigation bar has four options ('Select a sexy stache style', 'Eat the right foods that will grow your stache', 'Find the right accessories to accentuate your goods', 'Learn to trim your stache') that lead to labeled programs. The example includes a 'Begin' button and ends with a message . ```GuidedTrack *header: How to have a sexy mustache *button: Begin *navigation *name: stacheAppNavBar Select a sexy stache style *goto: style Eat the right foods that will grow your stache *goto: diet Find the right accessories to accentuate your goods *goto: accessories Learn to trim your stache *goto: trim *label: style *program: Stache Styles *label: diet *program: Stache Dietary Needs *label: accessories *program: Accessorizing Your Stache *label: trim *program: Keepin' it Tidy That's the end! You can click on the links above to review past topics. ``` -------------------------------- ### collection.min: Get minimum value Source: https://docs.guidedtrack.com/api Returns the minimum value in a collection of numbers. The example computes the minimum of a list of daily pushup counts. ```unknown >> dailyPushupsLastWeek = [110, 132, 123, 149, 162, 148, 135]>> minimumDailyPushups = dailyPushupsLastWeek.min ``` -------------------------------- ### collection.median: Get median value Source: https://docs.guidedtrack.com/api Returns the median value of a collection of numbers. The example computes the median of a list of daily pushup counts. ```unknown >> dailyPushupsLastWeek = [110, 132, 123, 149, 162, 148, 135]>> medianDailyPushups = dailyPushupsLastWeek.median ``` -------------------------------- ### Apply settings with *settings Source: https://docs.guidedtrack.com/api Applies settings to the program. The example enables the back arrow and hides the run menu. ```text *settings *back: yes *menu: no ``` -------------------------------- ### collection.max: Get maximum value Source: https://docs.guidedtrack.com/api Returns the maximum value in a collection of numbers. The example computes the maximum of a list of daily pushup counts. ```unknown >> dailyPushupsLastWeek = [110, 132, 123, 149, 162, 148, 135]>> maximumDailyPushups = dailyPushupsLastWeek.max ``` -------------------------------- ### Example home program for switching between lessons Source: https://docs.guidedtrack.com/manual/additional-keywords/switching-users-around-multiple-saved-positions A separate 'home' program that presents a question with options to switch into different lessons. Users can select a lesson and be transferred to it. ```guidedtrack -- An example "home" program that helps users *switch around.Hey there future furball fashionista! *question: Which lesson do you want? Lesson 1 *switch: My program lesson 1 Lesson 2 *switch: My program lesson 2 Lesson 3 *switch: My program lesson 3 Etc. ``` -------------------------------- ### Redirect returning users after 3 days with *startup and *reset Source: https://docs.guidedtrack.com/manual/additional-keywords/events-and-triggers Extends the previous example to redirect users who have been away for more than 3 days to a 'beginning' label using *goto with *reset. The *reset option exits any subprograms and ensures the main program takes control. Note that *goto within *startup requires *reset, and page breaks are not allowed. ```guidedtrack *events *startup *if: last_load >> time_elapsed = calendar::now - last_load *if: calendar::now + time_elapsed > calendar::now + 3.days *goto: beginning *reset >> last_load = calendar::now *label: beginningLet's get started! ``` -------------------------------- ### collection.mean: Get mean value Source: https://docs.guidedtrack.com/api Returns the mean (average) value of a collection of numbers. The example computes the mean of a list of daily pushup counts. ```unknown >> dailyPushupsLastWeek = [110, 132, 123, 149, 162, 148, 135]>> averageDailyPushups = dailyPushupsLastWeek.mean ``` -------------------------------- ### Work-around for auto-play with manual audio permission Source: https://docs.guidedtrack.com/api Shows a work-around for browser auto-play blocking: a manual audio play (with *start: no) grants permission for later auto-play (with *start: yes). The example uses *label, *question, *goto, *wait, *clear, and *button to build a meditation flow. ```text *label: start At the end of your meditation session, we'll play a chime sound. Please play that sound right now to make sure that the volume of your speakers or headphones is at the right level. /NOTE: It's important for you to play this audio file at least once since it gives this web page permission to auto-play future audio files, like the chime sound we play at the end of your meditation session./ *audio: https://1227185674.rsc.cdn77.org/aud/demo/bell.mp3 *start: no *hide: no *question: Did the chime sound play correctly? Yes No *goto: start Now, meditate on something for 15 seconds. When the time is finished, we'll play the same chime sound you heard on the previous page. *wait: 15.seconds *clear Meditation time is over now! *audio: https://1227185674.rsc.cdn77.org/aud/demo/bell.mp3 *start: yes *hide: yes *button: Restart *goto: start ``` -------------------------------- ### Check time since last visit with *startup Source: https://docs.guidedtrack.com/manual/additional-keywords/events-and-triggers Use *startup to check if the user has a last_load variable. If not, it's their first time and the variable is set. If it exists, calculate time_elapsed as the difference between now and last_load, then update last_load. ```guidedtrack *events *startup *if: last_load >> time_elapsed = calendar::now - last_load >> last_load = calendar::now ``` -------------------------------- ### Operation.limit: combine with skip for pagination Source: https://docs.guidedtrack.com/api Combines .skip with .limit to get the records for the second page of a search operation. This only applies to search operations. Loads 100 records starting at record #101. ```javascript const participantsExcludingFirstPage = guidedtrack.table("participants") .search() .skip(100) .limit(100) .values(); ``` -------------------------------- ### *quit in multiple choice options Source: https://docs.guidedtrack.com/manual/additional-keywords/quitting-a-users-run Example of using *quit in a multiple choice question. If the user selects 'Fish', the program quits immediately after showing 'Fish disfavorer! Get out of my face.' and does not display the following text. ```guidedtrack *question: Which of these animals is least awesome? Goat So, you're hating on goats *question: What have goats ever done to you? Fish Fish disfavorer! Get out of my face. *quit Now for something completely different. ``` -------------------------------- ### Startup event with *goto and *reset Source: https://docs.guidedtrack.com/api Defines a *startup event that runs on every program load. It displays a message and then uses *goto with *reset to move to a label, preventing the program from starting over. ```text *events *startup You should see this text every time the program loads! *goto: Wherever *reset *label: Wherever-- Now do other stuff... ``` -------------------------------- ### *label: startLabel with *goto Source: https://docs.guidedtrack.com/api Declares a label and uses *goto to return to it. The program loops until the correct answer (42) is given. ```guidedtrack *label: startLabel *question: Try to guess the number I'm thinking of: 7 Nope! Try again! *goto: startLabel 13 Nope! Try again! *goto: startLabel 42 Correct! ``` -------------------------------- ### Operation.sort: order search results by a field Source: https://docs.guidedtrack.com/api Specifies the order in which the search operation returns results. This only applies to search operations. The example gets all Johns in the "participants" table ordered by age (oldest first). ```javascript const result = guidedtrack.table("participants") .search({"first_name": "John") .sort({"age": "desc"}) .values(); ``` -------------------------------- ### Full program with service and email Source: https://docs.guidedtrack.com/manual/advanced-options/custom-services-use-cases/implementing-quotas This is the full program after adding the *service block. It includes the page introduction, questions for name, age, email, and interest, the service call, and an email confirmation. The *email block sends a confirmation to the provided email address. ```plaintext *page Welcome to the Design for Beginners Workshop Registration! This workshop is designed for people who have never had any formal design training but want to learn the fundamentals. Whether you're looking to improve your personal projects, advance your career, or simply explore a creative outlet, this workshop will give you the foundation you need to start designing with confidence. Please note: Registration is limited to 30 participants to ensure personalized attention and meaningful interaction. Spots fill up quickly, so register right away to secure your place! *page *question: What is your name? *save: name *question: What is your age? *type: number *after: years *save: age *question: What is your email? *tip: This is the email that will be used for communications. *save: email *question: What's your interest in the workshop? *type: paragraph *save: interest *service: Design Workshop Registration Manager *path: /registrations *method: POST *send: { "name" -> name, "age" -> age, "interest" -> interest, "email" -> email } *success Successfully saved your registration! *error You got an error: {it} *wait: 2.seconds *clear *email *to: {email} *subject: Workshop Registration Confirmation *body Hi {name}, Thank you for registering for our workshop! We've received your registration and look forward to seeing you there. Best regards, The Workshop Team Registration! Check your email for confirmation. ``` -------------------------------- ### Operation.columns: limit search result columns Source: https://docs.guidedtrack.com/api Limits the columns the result will contain to the ones in the argument list. This only applies to search operations. The example gets just the last name and age of all Johns in the "participants" table. ```javascript const result = guidedtrack.table("participants") .search({"first_name": "John"}) .columns("last_name", "age") .values(); ``` -------------------------------- ### Set up recurring email subscription with *email and *cancel Source: https://docs.guidedtrack.com/api Use this syntax to set up recurring emails with subscription and unsubscription flows. The *email keyword sends emails immediately or on a schedule; *when sets the first send time (must be in the future), *every sets the recurrence interval (cannot be more frequent than once per day), *until sets the stop time, and *identifier names the recurring email group for cancellation with *cancel. The example shows how to subscribe a user to daily reminders and how to cancel them on request. ```guidedtrack >> wantsToSubscribe = "no" >> wantsToUnsubscribe = "no" *question: Would you like to modify your subscription? Yes, I want to subscribe to daily reminders to brush my teeth! >> wantsToSubscribe = "yes" Yes, I want to unsubscribe from the daily reminders to brush my teeth. >> wantsToUnsubscribe = "yes" No, I want to leave. *if: wantsToSubscribe = "yes" *login *required: yes *email *identifier: toothBrushingEmailSubscription *when: calendar::now + 3.seconds *every: 1.days *until: calendar::now + 1.year *subject: Brush your teeth! 🦷 🪥 ✨ 😁 *body Don't forget to brush your teeth today! You've been subscribed! *button: Okay *if: wantsToUnsubscribe = "yes" *login *required: yes *email *identifier: toothBrushingEmailSubscription *cancel You've been unsubscribed! *button: Okay ``` -------------------------------- ### Randomize with *randomize: 3 and *everytime Source: https://docs.guidedtrack.com/api Randomly selects three items from the indented list, with a name and re-randomization on each pass. The example shows a label, a random selection of three cat idioms, and a button that returns to the start label. ```text *label: startLabel*Here are random three idioms related to cats:* *randomize: 3 *name: catIdioms *everytime Cat got your tongue? Like a cat on a hot tin roof Curiosity killed the cat Like herding cats Look what the cat dragged in. It's raining cats and dogs. The cat's pajamas Let the cat out of the bag When the cat's away, the mice will play. Fat cat *button: Get three more!*goto: startLabel ``` -------------------------------- ### Get date of a specific weekday with calendar::date Source: https://docs.guidedtrack.com/manual/additional-keywords/date-time-features Create a date for a specific weekday in the current week using calendar::date with a weekday key. Note that weeks start on Sundays, so 'Friday this week' may be in the past if run on a Saturday. ```guidedtrack >> fridayThisWeek = calendar::date({"weekday" -> "Friday"}) ``` -------------------------------- ### Redirect to a website with *goto Source: https://docs.guidedtrack.com/manual/additional-keywords/going-to-different-parts-of-the-program-or-to-other-websites Use *goto with a URL to automatically send users to another website in the same tab/window. The text before the *goto flashes briefly and the current run ends when the user is redirected. ```guidedtrack I'm done with you! Go to this website instead:*goto: http://www.guidedtrack.com ``` -------------------------------- ### Return to prior program with *return Source: https://docs.guidedtrack.com/manual/additional-keywords/return-users-to-the-prior-program Two programs that work together: the starting program launches the 'Super Fun Exercise' program, and the exercise program uses *return to exit back to the starting program when the user chooses 'This is lame.' ```text How 'bout we burn a few calories?*program: Super Fun ExerciseNow we'll do something else! ``` ```text *question: Ready? Play. This is lame. *return Let's get ready to prancercise! ``` -------------------------------- ### Example of using *randomize and *group keywords Source: https://docs.guidedtrack.com/research-guide/randomizing-groups-and-experiments/randomizing-questions Shows how to randomize groups of questions using *randomize: all and *group. The *group keyword is optional but keeps lines together and allows naming groups. ```guidedtrack >> agreementScale = [["Totally agree", 3], ["Agree", 2], ["Somewhat agree", 1], ["Neither agree nor disagree", 0], ["Somewhat disagree", -1], ["Disagree", -2], ["Totally disagree", -3]] --personality*randomize: all *group *question: I am an organized person. *answers: agreementScale *group *question: I am always on time. *answers: agreementScale *group *question: I keep my home clean. *answers: agreementScale --demographics*randomize: all *group *question: How old are you? *type: number *group *question: How many children do you have? *type: number *group *question: How many years have you lived in your current home? *type: number ``` -------------------------------- ### Operation.sort: order search results by multiple fields Source: https://docs.guidedtrack.com/api Sorts search results by multiple fields. Each field argument must be a JSON object with the field name as key and sort direction as value. The example gets all Johns ordered by age (oldest first) and last name. ```javascript const result = guidedtrack.table("participants") .search({"first_name": "John") .sort({"age": "desc"}, {"last_name": "asc"}) .values(); ``` -------------------------------- ### calendar::now example Source: https://docs.guidedtrack.com/api Returns the current datetime. The example assigns the result of calendar::now to a variable. ```unknown >> rightNow = calendar::now ``` -------------------------------- ### Send an immediate email with *email, *subject, and *body Source: https://docs.guidedtrack.com/manual/additional-keywords/emailing-users Use this snippet to send an immediate email to a logged-in user. The *email keyword must be followed by *subject and *body, with the email content tabbed beneath *body. Users will see a prompt to allow the email. ```GuidedTrack I'll send you an email now. *email *subject: An email for you *body Hi, I just wanted to send you an email. *This statement is in bold, because it's important.* Bye, Me ``` -------------------------------- ### Navigation bar with *navigation, *name, *icon, and *goto Source: https://docs.guidedtrack.com/api Creates a navigation bar named myToolNavBar with three items (Home, Quiz, Settings), each with a Font Awesome icon and a goto target. Indented code under each item would execute on click. ```text *navigation *name: myToolNavBar Home *icon: fa-home *goto: homeLabel Quiz *icon: fa-question-circle *goto: quizLabel Settings *icon: fa-cog *goto: settingsLabel ``` -------------------------------- ### Bad slider question example: unnecessary slider Source: https://docs.guidedtrack.com/research-guide/avoiding-bias/slider-questions Avoid using a slider for a Likert-style agreement question. This example uses a slider with *min: 0 and *max: 100, allowing any number from 0 to 100, which adds unnecessary detail. The source labels this as a bad example. ```GuidedTrack *maintain: Please indicate the degree to which you agree or disagree with the following statement. *question: I tend to be reserved and quiet. *type: slider *before: Strongly disagree *after: Strongly agree *min: 0 *max: 100 ``` -------------------------------- ### *switch: programName with *reset Source: https://docs.guidedtrack.com/api Use *switch with the optional *reset sub-keyword to restart a target program from the beginning instead of resuming its last state. The example shows three lessons, each with a *switch and *reset. ```text *question: Which lesson would you like to view (from the beginning)? Lesson 1 *switch: Lesson 1 *reset Lesson 2 *switch: Lesson 2 *reset Lesson 3 *switch: Lesson 3 *reset ``` -------------------------------- ### Basic squid navigation with *navigation Source: https://docs.guidedtrack.com/manual/additional-keywords/page-navigation Example of a basic navigation bar with four items (Squid Types, Squid Meals, Squid Poop, Squid Facts), each with content indented beneath. Uses *name: squidNavBar for the navigation name and a *header for the program. Navigation items are clicked to display their content immediately. ```GuidedTrack n*navigation and stuff. ```