Version: 4.2.1 +
In this exercise we will display a graph in our website.
- The Futurama Editor must be installed.
- Futurama Runtime must be installed.
- Completing the tutorial Adding interactivity to your website first, is recommended.
This is a sequel of the The Guessing Game I (Creating formulas with Futurama). You can download the basis for this exercise (the end-result of the The Guessing Game I exercise) by clicking here.
Guess the number is a game we're creating in Futurama. In this game you have to guess a number that is chosen randomly (by Futurama). This number lies between 0 and 100. When the user enters a number, the game will say whether the guess is correct, or should be higher, or lower.
In the first part of the exercise, we've constructed the formulas needed to play the game. In this part, we will construct the WebPage with the interactivity to play the game.
Create a website in which you can play the game. This means: A webpage with an input field in which you can enter your guess, and an output field that states whether your guess is correct, or should be higher or lower.
Take the following steps to do so:
- Create a WebPage object and name it ‘Start’. (This WebPage should be the StartWebPage of your document)
- Within the WebPage, create a WebLabel and name it 'DescriptionInputBox'. In the property 'Text', enter the text: 'Choose a random number between 0 and 100'.
- Below this description, create a TextBox. In this Textbox the user will enter his or her guess. Name it 'InputBox'.
- The TextBox should be linked to a UserVariable. The value entered in the textbox is submitted into this UserVariable, and it should then be compared to our randomly chosen number. Therefore the Fixed Value 'InputNumber' should be used as our UserVariable. Rightclick the Fixed 'InputNumber' and choose 'Change to'. Now select the 'UserVariable'.
- Now create a button within your website. You only have to enter the Text property, for instance with the next 'Click', or 'Submit'. The button will invoke a postback.
- Now create another WebLabel and name this one 'Message'. In the Text property, refer to the Formula 'MessageCorrectHigherLower'.
Save your file and open your website in your browser. You should already be able to play the game now.
As you'll might notice, the 'randomly' chosen number won't change each time you play the game. To achieve this, we will have to use the Unique_value property of the Rand()-formula:
- We will use a Formula that returns the current Date and Time as our unique value. Everytime you start the webpage, off course this value will be different. This formula is a Type Date formula, so it can not be used directly, as the unique value should be a String.
Therefore, within the formula Rand(), first create another Formula, 'FormatDate'.
- Within this formula, select the Date Formula 'Now()' in the Date section. In the Format section, enter 'hh;mm;ss'. This means the hours, minutes and seconds of the current date and time will be returned. This ensures a unique value every time the website is started.
- Save your file, and verify that the random number is now different every time you play the game.
- Do not forgot to refer to your WebPage in the StartWebPage property of your Document.
- When you start the WebPage you already see a message: Correct, higher or lower. We will change this in part III of this exercise.
- In this Exercise, Futurama only gives one random number and sticks with that number. We want Futurama to choose a new random number once the user has guessed the number correctly. This will also be done in part III of this exercise.
You can download our solution for this assignment by clicking the image at the right. (Futurama 184.108.40.206)
Please note that you can very well have a different solution that is just as good as ours.