Recent Updates Toggle Comment Threads | Keyboard Shortcuts

  • Belen 11:30 am on May 9, 2024 Permalink  

    Form validations: a case study 

    There may be times that you need to validate the data that the users of your program enter before allowing them to move forward. The simplest validation, making sure a field is not empty, is already built into GuidedTrack’s questions (you can override this by using *blank). If you require that the input is a number, use *type: number. We are now going to explore how to create validations that meet your own criteria.

    Let’s say that you have created a survey that requires your participants to be 18 or more. Additionally, it’s highly unlikely that they will be older than 110, so any number greater than that is most likely a typo. Here’s how you can control that the field age is between those two numbers:

    >>age = 0
    *while: age > 110 or age < 18
    	*question: What is your age?
    		*save: age
    		*type: number
    	*if: age > 110 or age < 18
    		Sorry, {age} is not a valid age for this survey!
    

    What about ensuring that an email address has the format xxx@xxx.xx? You can use the search bar to find the public program email format validation, which takes a given email and check that it contains the characters “@” and “.” in the correct order, along with the required number characters for the email to be valid. This program outputs variable out_isValidEmail, with value 1 if the email is valid, and 0 if it’s not. Here is how you would add this validation to your program:

    *label: emailRequest
    *question: Please, enter your email:
    	*save: email
    	*default: email
    	
    >>in_emailToCheck = email
    *program: email format validation - public
    
    *if: out_isValidEmail = 0
    	The format of your email is not correct. Please enter it again:
    		*classes: alert bg-danger
    	*goto: emailRequest
    

    It is often a good idea to let the users of your program know what they typed so they can see where the error is. In the first example we showed you, we did it by including what they typed in the error message. In the second example we’re using the *default keyword. The first time that the question is asked, the email box will appear empty but if the validation fails and they go back to the same question, the value they entered will appear inside the box. That way they can either modify what they entered, or delete it and type in something completely new.

    Additionally, on this second example we have used *classes to highlight the error message with a red background.

    You can also validate multiple fields being displayed together in the same *page. The code below generates a sample contact form to gather a user’s name, US phone number and email address. The email format is validated as described before, and the *placeholder nudges the user to enter their number with the format (XXX) XXX-XXXX, but the validation will succeed as long as the user enters 10 digits, spaces, hyphens, and parentheses. If the latter are used, they must be at the beginning of the number, containing a three digit code.

    >> name = ""
    >> phone = ""
    >> email = ""
    
    *label: askEmailAndPhone
    *page	
    	--If the variable in_phoneToCheck exists, it's because they are returning to this page because a validation failed
    	*if: in_phoneToCheck
    		
    		--Display validation errors
    		*if: out_isValidPhoneNumber = 0
    			The phone */{phone}/* is invalid. Please enter it again with the format (XXX) XXX - XXXX
    				*classes: alert alert-danger
    				
    		*if: out_isValidEmail = 0
    			The email */{email}/* is invalid. Please enter it again.
    				*classes: alert alert-danger
    
    	*question: Name:
    		*save: name
    		*default: name
    	
    	*question: Phone:
    		*save: phone
    		*placeholder: e.g., (123) 456 - 7890
    		*default: phone
    	
    	*question: Email:
    		*save: email
    		*default: email
    
    --phone number validation
    >>in_phoneToCheck = phone
    *program: US phone number format validator - public
    
    --email format validation
    >>in_emailToCheck = email
    *program: email format validation - public
    
    *if: out_isValidPhoneNumber = 0 or out_isValidEmail = 0
    	*goto: askEmailAndPhone

    And here’s what a user would see if they mistype the phone and the email:

     
  • Belen 3:35 pm on June 14, 2023 Permalink  

    Feature update – rank-order questions 

    Rank-order questions are used in those cases when you want the users of your program to reorder a set list of options by dragging and dropping them. For example:

    • to express preference
    • to rearrange a list by the size of the items in it
    • any time you want the users choose the order in which the elements of a list are arranged.

    In order to create a rank-order question, you need to indent *type:ranking under the *question and provide the list to rank:

    Let’s look at an example of how rank-order questions work:

    *question: Enter the books that you read last month:
        *tip: Type one book per line
        *multiple
        *save: booksRead
        
    *question: Order the books that you read by the time it took you to read them:
        *tip: The book that took the longest should be up top
        *answers: booksRead
        *save: orderedBooks
        *type: ranking

    The first question asks users to type in a list of the books they read that month. Their answer is saved in the variable booksRead.

    In the case shown above, the value of booksRead would be:
    booksRead = ["A Room of One's Own", "Catch-22", "Demon Copperhead", "One Flew Over the Cuckoo's Nest"]

    The second question is the rank-order one, where booksRead is displayed and the user has instructions to reorder them. 

    If they clicked Next after reordering them as shown, the value of orderedBooks would be.
    orderedBooks = ["Demon Copperhead", "One Flew Over the Cuckoo's Nest", "A Room of One's Own", "Catch-22"]

    Note that, although both collections have the same elements, they are different because the elements are in different order.

     
  • Belen 9:11 am on June 12, 2023 Permalink  

    Hot Keys 

    Hot keys (a.k.a. keyboard shortcuts) allow you to quickly perform a variety of tasks when you are using GuidedTrack’s code editor. Most likely, you are already familiar with many of this key bindings, such as pressing Ctrl+S (Windows) or Cmd+S (macOS) to save your program.

    Another handy key binding is Ctrl+Shift+C (Windows) or Cmd+Shift+C (macOS) to comment or uncomment the line of code where your cursor is at. If you want to comment a block of consecutive lines (i.e., make a multiline comment), highlight the block of code you want to comment all at once and use the same combination of keys.

    Use Ctrl+, (Windows) or Cmd+, (macOS) to display the settings menu of the code editor, where you can change the theme of the editor, font size, etc. Click back on the code editor to save the settings and hide the menu.

    You can find a detailed list of hot keys in the GuidedTrack manual.

     
c
compose new post
j
next post/next comment
k
previous post/previous comment
r
reply
e
edit
o
show/hide comments
t
go to top
l
go to login
h
show/hide help
shift + esc
cancel