Making a Better User Experience

User Experience or UX is at the core of any great application. If you think about your favorite app, you probably love it because it’s fun, entertaining, easy to use, and useful, in other words, you had a great User Experience. 

By the end of this section, you will know how to:

  1. Create a better UX
  2. Use the ^ piece of punctuation
  3. Stop your story from repeating itself with the Continue widget
  4. Input images in your story with the imageInset widget.
  5. Use the Question widget
  6. Build a basic interactive story
  7. Learn where to get more information on more Widgets

Creating Better UX

In the previous section, there was a link to that showed that the groups of says widgets just went in a constant loop around and around. If you recall, as well from the first section, that without ^ next: the app stops and you have to change the URL to get the app to do anything. But if you put a string of ^ next:, the story just goes around and around. This obviously creates a bad user experience because:

  1. There is nothing new
  2. The user/ student doesn’t have to do anything
  3. The app moved too fast to read anything
  4. Again, there is nothing new

The challenge then is to figure out the right pace of your users/students and to write other widgets in encourage the user to interact with the story and to stop the story from going too quickly.

Using the ^

The ^ is another piece of punctuation that allows the author to make “extend” the previous line. The ^ is not essential like the +, – , > or < BUT it allows you to write scripts in a way that you the author can read. The ^ next uses this.

When writing these scripts, every new line that contains text MUST have a piece of punctuation on front of it. If your line is not a topic, trigger or response, then it MUST have a ^ in front of it. If you do not include the ^, you will confuse the app, and you will get a response, but not the one that you planned.

The ^ is important because all widgets use it to make your scripting code much much easier to read and understand.

The Continue Widget

The continue widget is the most basic and easiest way to have your user interact with the game. Also remember that the application will continue to link together topics when you use the ^ next: command. As a result, the triggers will continue to be called without giving the time that he or she needs to read the text.

The continue widget is thus an easy way to allow the reader to progress through the story at his or her own reading pace.

The basic look of the continue widget looks like:

> topic continuewidget

  + example continue widget
  - continue: SOME TEXT HERE
  ^ say: second

  + second
  - guide says: This is my second widget!

< topic

** NOTES

  1. Rather than using ^ next:, the continue widget uses ^ say: to tell the application which trigger to look for next. The difference between the two commands is that ^ say: command will appear on the screen for the reader to see, while the ^ next: does not appear on the screen.
  2. Its important to note that you can put whatever you like after - continue:
  3. The continue widget has a few other, more advanced features, that you can read about here.

So now that you know how to input the continue widget, let’s put it into your story. Remember that you must include a trigger and path for it to find the continue widget

  1. Go to the boteditor
  2. Find your name and open your example brain file
  3. Between your 2nd and 3rd triggers, input the following code 
      + continue button
  - continue: NEXT STEP
  ^ say: third widget
  4. Remember to change your ^ next: in the second widget so that it finds the correct trigger
  5. Also remember that the say has to match the next trigger that you want the application to look for.
  6. Save your code
  7. Insert the correct URL to start the app

If you’ve done everything right, then your app should look like:
continue-widget

When you click on the NEXT STEP button, the app should continue until it comes back around to the continue widget.

Inserting Images

inset

Visual images help not only to make classes more effective, but also, help to make stories more interesting.

By using in the inset widget, teachers can put images from Comic English’s library into any story.

To see a list of available images, click here.

To insert the image, click and paste the following code into your example brain file. To learn about all of the functionality of the inset widget, read the page on the inset widget.

  + imagetrigger
  - Image description 
  ^ inset: /assets/shared/items/rabbit.jpg

So now let’s create a new script that:

  1. Contains a new topic named exampleimage
  2. Contains at least two says widget
  3. Contains a continue widget
  4. Contains an image of a pirate

    /assets/shared/items/pirate.jpg

  5. Connects all the widgets with a combination of ^ next: and say: for the continue

 

If you are having trouble, you can click on the following link to see a some example code. This code appears in the browser like this.

The Question Widget

Up to this point, you’ve learned how to:

  1. Create a dialogues
  2. Insert Images
  3. Stop the flow of story using the continue widget

 

But up to this point, there isn’t really any interactive for the user to play around with.  The Question widget is the first of a series of widgets that allow teachers to create interactivity for their lessons and stories. The question widget is a very simple choice that the player / student must make on the screen. At the scripting level, when a player clicks on a button, the player is calling a specific trigger. To call the questions widget insert - question: XXXX in the response, followed by ^ choices: A / B / C etc. Choices MUST be separated by /. Remember that each choice is a specific trigger. Look at the example below.

> topic questionexample
  + start
  - question: What should I eat for dinner? 
  ^ choices: steak / corn / dog food

  + steak
  - noah says: That's a great idea

  + corn
  - noah says: That doesn't sound so good

  + dog food
  - noah says: I hope that you are joking. That sounds disgusting.

< topic

Now that you understand how to make choices, input a question into your existing story and brain file. Remember that you must link all your triggers together. You can see a working version of the continue widget here.

Final Project

Create a new brain file  and make an introduction to a choose your own adventure story. Be sure to include:

  1. Images (backgrounds or items)
  2. Continue widgets for UX
  3. Dialogues
  4. At least 1 question, but not more than 3 (Well explain why in the next chapter)

When you are done, you can see an example piece of code here that creates this little story.

Congratulations. If you’re reading this, then you have enough knowledge to create an interactive story. In the next section, you will learn more advanced topics.
NEXT

Leave a comment