We are going to implement the fill in the blanks widget, but in order to do so, you will have to learn about a few other concepts along the way. The fill in the blanks widget allows you to present a word or words to the player and have them select from a list of options the correct answer.
By the end of this page, you will know how to:
- Use the blanks widget
- Learn to chain together multiple topics
- Learn new punctuation
- Learn about the twoshot widget and bubbles
The fill in the blanks widget
The blanks widget is called by inserting the - blanks: in the response plus a ^ choices: a / b / c. After, each choice must have a corresponding trigger. It is also important to note that you tell the application where to put the blank by including [[blank]]. Each response may only include ONE [[blank]]
The basic code for the blanks widget is:
> topic blankswidget + start - blanks: When I was a kid, I always [[blank]] with my brother. ^ choices: fought / fights/ will fight + fought - guide says: XXXX ^ next: exitcontinue + (fights|will fight) - guide shouts: Check your verb conjugation ^ next: start + exitcontinue - continue: next ^ showInput: no ^ say: start < topic
Some important things to take note of in above code sample:
- The correct answer is ALWAYS the first choice
- Each
^ choice:matches to a trigger later on to tell the application where to go next. - The shouts widget
- The ( ) punctuation in the in the trigger.We will deal with this later in the page.
Now its your turn to implement the blanks widget.
- Go the boteditor
- In your brain file, create a new topic called blanksexample
- Write in one blanks
- Write it one says widget
- Write in at least one continue widget
- Write in at least one image
Stringing together multiple blanks widgets
Blanks are a great way to bring interactiveness and learning to dialogues. You can string together multiple blanks widgets to create dialogues between the application and the character. Look at the example code below of the player describing his experience working with his brother as a kid. Keep an eye out for places where the application will get confused and crash
> topic blankswidget + start - blanks: Back when I was a kid, I always [[blank]] with my brother. ^ choices: fought / fight/ will fight + fought - guide says: You are adults, I hope that you don't still fight now. ^ next: response + (fight|will fight) - guide shouts: Check your verb conjugation ^ next: start + response - blanks: No, we don't [[blank]] with each other any more. ^ choices: fight / fought/ will fight + fight - guide response: I'm glad to hear it. ^ next: exitcontinue + (will fight|fought) - guide shouts: I'm confused! ^ next: response + exitcontinue - continue: next ^ url: /lessons/example < topic
Did you see how the application could get confused? Hopefully you noticed that by using multiple blanks together to create a dialogue, the example above created a situation where you have multiple triggers within the same topic with the same name. Remember that ALL triggers MUST be UNIQUE within a topic. So rather than creating a new set of triggers, we can create a new topic and reuse our previous triggers.
Creating and Linking New Topics together
Creating and chaining new topics is really quite easy. To do so, all you have to do is to append or add {topic=XXXX} to the end of the response and then include the next trigger in the ^ start: command. Next create a new topic name and include a + start code block. Look at the example below:
> topic firsttopic
+ start
- guide says: This is the first topic {topic=secondtopic}
^ next: start
< topic
> topic secondtopic
+ start
- abby shouts: GREAT! This is the second topic
< topic
So now that we know how to link topics together, lets add and new topic called blankswidgetresponse and a {topic=blankswidgetresponse} rewrite the interactive story above in a way that the app can understand.
> topic blankswidget
+ start
- blanks: Back when I was a kid, I always [[blank]] with my brother.
^ choices: fought / fight/ will fight
+ fought
- guide says: You are adults, I hope that you don't still fight now. {topic=blankswidgetresponse}
^ next: start
+ (fight|will fight)
- guide shouts: Check your verb conjugation
^ next: start
< topic > topic blankswidgetresponse
+ start
- blanks: No, we don't [[blank]] with each other any more.
^ choices: fight / fought/ will fight
+ fight
- guide response: I'm glad to hear it.
^ next: exitcontinue
+ (will fight|fought)
- guide shouts: I'm confused!
^ next: response
+ exitcontinue
- continue: next
^ url: /lessons/example
< topic
If you notice in the above example, we’ve essentially used the same triggers but within different topics.
** NOTE
- It is good practice to make the FIRST trigger in your topic
+ start. This lets makes it MUCH easier to navigate URLs when stories get more complicated - It is also good practice to keep your topics short, but also descriptive of what happens in that topic. firsttopic is not a great topic name, but topicintro is.
Punctuation
As you noticed above, there is some new punctuation in our script.
- {topic=XXX } tells the application to change topics. This must be done in the response. Some common places that this is done:
+ continuewidget - continue: next {topic=XXXX} ^ showInput: no ^ next: start+ sayswidget - guide says: I am excited to meet you. {topic=XXXX} ^ showInput: no ^ next: start - (trigger1|trigger2) is a handy bit of punctuation that allows you to have more than one trigger return a single response. To do this, put all your triggers in ( ) and separate the triggers by a single bar | shift and the backward slash. This is saves you A LOT of time by allowing you to group responses together in the same trigger field.
> topic multitrigger + start - question: Where is Berlin located? ^ choices: Germany / Europe / Italy / Africa + (germany|europe) - guide says: CORRECT! You know your Geography! + (italy|africa) - guide shouts: WRONG!Go look at a map. < topic
Two Shot Widget and Bubbles
The twoshot widget is another cinematic widget that allows the user to combine actors with backgrounds. The twoshot widget is often used at the beginning of topic help set the scene by putting a character in front of a background setting.
The twoshot widget is often followed by a bubble widget that shows the actor saying something.
Have a look at the code below:
+ start - describe the two shot ^ template: twoshot ^ actor1: jacob ^ actor2: guide ^ backgroundSrc: /assets/backgrounds/chicago.jpg ^ next: bubbles + bubbles - bubTR: This is two shot.
** NOTES about twoshot
^ actor1:and/ or^ actor2:are both optional.^ actor1:always appears on the left side^ actor2:always appears on the right
side- You can only select actors from the list of actors in Comic English’s library.
- Only include the actor’s name in lowercase
^backgroundSrc:can be selected from Comic English’s image library which can be found here.- You MUST include the full path to the picture as outlined in the image instructions.
Click here for more details about the bubbles widget
Wrapping Up
On this page, you learned how to change topics, giving you the ability to write more interactive, interesting and unique stories. The twoshot widget, shouts widget, and the fill in the blanks widget will all allow you to create more meaningful, interactive stories and lessons for your students.
To practice implementing these features do the following:
- Open the boteditor
- Create and name a new brainfile
- Create at least two topics
- Open your lesson/ story with a twoshot widget and bubbles widget to set the scene
- Implement at least one question widget
- Remember about UX and be sure to put continue widgets in when necessary
- Have your students play by using the blanks widget
If you have any problems, refer to each widget’s page. Or, for quick code reminders, please look at our reference guide.
When you are finished, you can see a working example here, and the code for this sample here.
Comic English 