ARIS Pro-tip: A little html goes a long way

Sometimes it doesn’t take much to make your ARIS game a little prettier and a little bit easier to follow. Even if you’ve never coded before, you can use a few html tags in your quests to really improve the way they are read by your players. In this short tutorial, I’ll show you how.


The idea for this post came from a recent design meeting with some students about their game. They had no idea text customization was even possible in ARIS, and I realized they are probably not alone. They are using a quest to both introduce the interface of ARIS and to help players navigate through the beginning of their game. Without being able to change the layout, their quest will not be able to do its job very well.

BTW, this game, or rather series of mini-games, is to accompany the Along the Rio Grande exhibit at the Albuquerque Museum, following some of the story of early Spanish conquest of and migration to the region. It is directed by Gianna May in an independent study and what seems like a legion of volunteers she has organized. They have a soft launch this Saturday before opening to the public at family day on the 10th. I’m very excited!

The Problem

Anyway, here’s how their intro quest looked in the game:

Original quest display - click for larger version

Original quest display – click for larger version

And here’s how it looked in the editor:

Welcome to the Albuquerque Museum! As you explore the museum, look for Governor Coronado in the Along the Rio Grande exhibit. Scan the code under his name in the decoder and you will be able to play the game!

Without thinking too much about the wording itself, let’s just think about how this looks on the screen. It looks like a wall of text, and since that wall is centered, it is an awkward wall of text. It’s a fair amount of work to read through that and figure out how to get started. The student team realized this but didn’t know it was possible to present the text any differently in ARIS.

The Fix

A few html tags will let us improve this a lot.

Revised quest display - click for larger version

Revised quest display – click for larger version

I did this by making use of a few basic html tags:

  • <p>…</p> – this will allow us to create separate paragraphs, making it easier for the player to distinguish between the welcome message and the specific physical instructions for example.
  • <br> – this allows us to break lines of text without creating new paragraphs. This is used to keep parts of sentences together on a line that we want to be read together.
  • <b>…</b> – bold text adds emphasis.
  • <i>…</i> – italics add a different kind of emphasis.

And here is the revised quest text in the ARIS editor to make this happen (the tags are bold here so you can see them more easily):

<p>Welcome to the ABQ Museum! </p>
<p>As you explore the museum,<br> look for <b>Governor Coronado</b> <br>in the second part of the <i>Along the Rio Grande</i> exhibit. </p>
<p><b>Scan the code</b> under his name <br>in your <b>decoder</b> to begin the game!</p>
<p>Your <b>decoder</b> is a tab <br>on the bottom of the screen.</p>

The technical terms and specific directions are in bold. The exhibit’s name gets italics. Most of the work was in creating various line breaks. Take a look at where I broke lines and then back again at the original version. Would you break them in the same way?

I also made some other small changes:

  • ABQ instead of Albuquerque – so the whole sentence fits on a single line.
  • Describe the decoder as a part of the interface – I get the feeling that newcomers need some help establishing the separate contexts of the software interface and the physical space.

This intro quest isn’t perfect yet. It could probably use another revision. For example, I don’t think the title helps a lot or that we really need to tell players that they are at the ABQ Museum. But these changes to the layout bring it a long way to my mind. Hopefully this helps you think about how you can use small bits of html code to improve your quests.

Not just quests

You can also use html rendering in other parts of ARIS, and use more than the few tags I showed here, like include inline images. At the moment, there’s a bug and html doesn’t work in plaques, but that will likely change soon, and in character scripts you can use html but not at the same time as our ARIS specific scripting like <dialog> and <npc>. To see more about how to do the latter, check out this section in the ARIS Manual.


One thought on “ARIS Pro-tip: A little html goes a long way

  1. This is fantastic. I can see ARIS as a way to teach basic programing skills like HTML tags to beginner learners in computer science. Great post!

Leave a Reply

Fill in your details below or click an icon to log in: Logo

You are commenting using your account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s