TWiki > Main > HowShowHTML

How do I show the user information using an HTML page?

There are two parts to this; you need to make an HTML page to show the information and then you need to send information to it from the mediascape.

Showing the information in an HTML page

The HTML page is a conventional HTML page with two additions.

A small fragment of script to show the information on the page so that the user can see it.

A large script that gets the information passed from the mediascape. You just copy and paste this in so you don’t need to even look at it.

Here is a simple HTML page without the additions:

<html>
<head>
<title>My page</title>
</head>
<body>
Hello World!
</body>
</html>

If you are not too sure about all the terms then you need to learn some basic HTML before going further.

In the ‘body’ of the page we want to add the information that we sent to the page from the mediascape. In the mediascape we will shortly be identifying this information by calling it ‘score’ so the bit we want to add here looks like this

<script type="text/javascript">
   document.write(srchData.score);
</script>

We can put it in the file after the ‘Hello World!’ text, like this:

<html>
<head>
<title>My page</title>
</head>
<body>
Hello World!
<script type="text/javascript">
   document.write(srchData.score);
</script>
</body>
</html>

Now, to make it all work, we need to paste in a large script to get the information. This goes in the ‘head’ part of the page. Once it is there we don’t do anything else with it. You can copy the script from the examples here or from this page. The final HTML will look like this:

<html>
<head>
<title>My page</title>
   <script type="text/javascript">
       function decodeSearchString() {
          var nameValue = new Array();
          var searchStr = unescape(location.search.substring(1));
          if (searchStr) {
                  var formElement = searchStr.split("&");
                  var tmpArray = new Array();
                  for (k = 0; k < formElement.length; k++) {
                               tmpArray = formElement[k].split("=");
                               nameValue[tmpArray[0]] = tmpArray[1];
                  }
          }
          return nameValue
       }
       var srchData = decodeSearchString();
   </script>
</head>
<body>
Hello World!
<script type="text/javascript">
document.write(srchData.score);
</script>
</body>
</html>

In order to work the HTML page needs to be imported into the mediascape. See How do I get a single HTML page into my mediascape? for how to do this.

Note: If you want more than one bit of information to be shown in the HTML page then simply add more of these small code fragments with the appropriate variable names in place of the name ‘score’. If you want to show lots of information but you don't know in advance what they are going to be called then you can use this page, this approach is also useful for debugging: Page That Shows All Parameters Passed In.:

Sending information from the mediascape

In the mediascape you need to set up a variable to hold the information you want to send to the HTML page. Imagine we want to show the users score in some mediascape game.

Creating variables

In the left-hand panel on the mscape maker right-click on the ‘State’ object and select ‘Add Group’.

Right click the group and select ‘Add Number’.

Note: You can change the name of the group and the name of the variable simply by clicking on the names and editing them.

When the number is selected you can see its properties in the bottom-left panel of the mscape maker. Here you can change the initial value that the variable has.

Note: If you want more than one bit of information to be sent to the HTML page then simply add more variables to this group and they don’t have to be numbers they can be texts or logical True/False values.

Sending variables to the HTML page

Now you want to say ‘hand this variable to the HTML page’. You do this in response to some event. For example you could create a region and select it to show the script for the ‘OnEnter’ event in the script window (bottom-right panel).

Drag and drop your HTML page from the left-hand panel into the script window and it will put the name there. If you now type a full-stop (a period) after the name a menu will pop-up showing the possible completions. Select ‘ShowWithStateGroup’ (you have to double click) and you will have the following line in the script:

myhtml.ShowWithStateGroup(extraData);

The extraData bit needs to be changed into the name of the variable group that you created, if it is called ‘Group01’ then you need this line of script:

myhtml.ShowWithStateGroup(Group01);

When the event is triggered, this bit of code will display the HTML page on the mobile device and hand it the variable to be displayed.