**MAJOR TUTORIAL** Make a Pop Quiz Game in Andromo using HTML5 and Javascript**MAJOR TUTORIAL**
Ok I have seem people ask how to make a pop quiz app in the other support forums and now in this forum. If have never coded in HTML before I think your should do at least the first 2 tutorials I made to get comfortable before taking on this tutorial.
Tutorial 1 & 2 is located here
Part 1
http://forums.andromo.com/discussion/862/html-tutorial-1-the-basics-of-an-html-page-how-to-lay-it-out-and-scale-to-screen-size-#Item_2
Part2
http://forums.andromo.com/discussion/867/html-tutorial-2-add-image-onscreen-and-alert-pop-ups-button-to-enhance-user-experience-#Item_12
Note: There are many ways to make a pop quiz app, the method I will show you is the easiest way I know to make it so you can edit the file
very simple and easy. We will name this file levelone.html , you can name next file leveltwo.html to tie the files together easier.
Ok if your ready go ahead and open your text editor and one .png or .jpeg image from any superman movie .
Now set up your HTML page like this.
<IDOCTYPEhtml>
<head>
</head>
<body>
</body>
</html>
Now we are going to go ahead and add the image plus the title which will appear in the andromo nav-bar. Also we are going to
put the question inside the <p> tag. We will also make a javascript function called wrong() . Remember go slow no need to rush!!
<IDOCTYPEhtml>
<head>
<title>Pop Quiz</title>
<script>
function wrong()
{
alert("wrong answer try again");
}
</script>
</head>
<body>
<p> What was Superman's real name?<p>
</br>
<img src="Superman.png" style="height:300px;width:300px;"
style="position:absolute;left:50px;top:60px;" />
</body>
</html>
In the <img src="" you will put the name of the photo on your computer I just put Superman.png as an example. The 1st style is
CSS code which determines the height and width your picture will be onscreen. The 2nd style tell you where on the screen your
picture will be placed. If you have a old device you might have to tweak the 1st style to make it smaller. The </br> tag makes a space between
objects onscreen this one put a space between the question and the picture.
function wrong() ------ this means you are making a function called wrong()
{
alert("wrong answer try again"); ---- when the function wrong is activated a pop up box with the words "wrong answer try again" will appear!! So cool!!
}
Now lets continue to make onscreen buttons!! Don't rush type everything in carefully!!
<IDOCTYPEhtml>
<head>
<title>Pop Quiz</title>
<script>
function wrong()
{
alert("wrong answer try again");
}
</script>
</head>
<body>
<p> What was Superman's real name?<p>
</br>
<img src="Superman.png" style="height:300px;width:300px;"
style="position:absolute;left:50px;top:60px;" />
</br>
</br>
<button type="button" style="width:80px;height:60px;"
onclick="wrong()" >Clark the Nerd</button>
<button type="button" style="width:80px;height:60px;"
onclick=location.href="leveltwo.html" >Clark Kent</button>
<button type="button" style="width:80px;height:60px;"
onclick="wrong()" >Bruce Wayne</button>
</body>
</html>
Ok now we have made the buttons using <button> tag. Now if you notice after the style you see different commands
in the onclick command now its time to explain them.
onclick= "" means the button is now enabled to be pressed and the commands between the " " will be activated.
onclick="wrong()" ---- means if the users select this a pop up box with the words "wrong answer try again"
onclick="location.href="leveltwo.html" ---means if the person clicks this button they got the answer right and now will go to the next question.
leveltwo.html is the next html file . Lets say you have 5 questions you name the 1st html file levelone.html then the 2nd leveltwo.html and
then the third levelthree.html you get the idea. And each html file will contain a different question and answers.
<button type="button" style="width:80px;height:60px;"
onclick="wrong()" >Clark the Nerd</button> ----- the part where is says clark the nerd is what will be displayed on the button.
Also note as you make more quiz pages change the location of the wrong() and location.href="" so that the user doesn't press
the same button to answer the question on each screen.
Well there you have it!!! You have made a pop quiz game on andromo , it might seem like alot of typing if your new but you will get used
to it plus once you have done it one time, you can copy and paste it on another blank html file and just edit it without retyping everything.
Here is an example source file run it on computer. It has 2 levels
http://sourceforge.net/projects/andromoapps/files/example.zip/download
And here is an apk with a full game
http://sourceforge.net/projects/andromoapps/files/PopMovieQuiz.apk/download
As always if you have any questions just ask here or contact me via email pixelpower12@gmail.com .
Tutorial 1 & 2 is located here
Part 1
http://forums.andromo.com/discussion/862/html-tutorial-1-the-basics-of-an-html-page-how-to-lay-it-out-and-scale-to-screen-size-#Item_2
Part2
http://forums.andromo.com/discussion/867/html-tutorial-2-add-image-onscreen-and-alert-pop-ups-button-to-enhance-user-experience-#Item_12
Note: There are many ways to make a pop quiz app, the method I will show you is the easiest way I know to make it so you can edit the file
very simple and easy. We will name this file levelone.html , you can name next file leveltwo.html to tie the files together easier.
Ok if your ready go ahead and open your text editor and one .png or .jpeg image from any superman movie .
Now set up your HTML page like this.
<IDOCTYPEhtml>
<head>
</head>
<body>
</body>
</html>
Now we are going to go ahead and add the image plus the title which will appear in the andromo nav-bar. Also we are going to
put the question inside the <p> tag. We will also make a javascript function called wrong() . Remember go slow no need to rush!!
<IDOCTYPEhtml>
<head>
<title>Pop Quiz</title>
<script>
function wrong()
{
alert("wrong answer try again");
}
</script>
</head>
<body>
<p> What was Superman's real name?<p>
</br>
<img src="Superman.png" style="height:300px;width:300px;"
style="position:absolute;left:50px;top:60px;" />
</body>
</html>
In the <img src="" you will put the name of the photo on your computer I just put Superman.png as an example. The 1st style is
CSS code which determines the height and width your picture will be onscreen. The 2nd style tell you where on the screen your
picture will be placed. If you have a old device you might have to tweak the 1st style to make it smaller. The </br> tag makes a space between
objects onscreen this one put a space between the question and the picture.
function wrong() ------ this means you are making a function called wrong()
{
alert("wrong answer try again"); ---- when the function wrong is activated a pop up box with the words "wrong answer try again" will appear!! So cool!!
}
Now lets continue to make onscreen buttons!! Don't rush type everything in carefully!!
<IDOCTYPEhtml>
<head>
<title>Pop Quiz</title>
<script>
function wrong()
{
alert("wrong answer try again");
}
</script>
</head>
<body>
<p> What was Superman's real name?<p>
</br>
<img src="Superman.png" style="height:300px;width:300px;"
style="position:absolute;left:50px;top:60px;" />
</br>
</br>
<button type="button" style="width:80px;height:60px;"
onclick="wrong()" >Clark the Nerd</button>
<button type="button" style="width:80px;height:60px;"
onclick=location.href="leveltwo.html" >Clark Kent</button>
<button type="button" style="width:80px;height:60px;"
onclick="wrong()" >Bruce Wayne</button>
</body>
</html>
Ok now we have made the buttons using <button> tag. Now if you notice after the style you see different commands
in the onclick command now its time to explain them.
onclick= "" means the button is now enabled to be pressed and the commands between the " " will be activated.
onclick="wrong()" ---- means if the users select this a pop up box with the words "wrong answer try again"
onclick="location.href="leveltwo.html" ---means if the person clicks this button they got the answer right and now will go to the next question.
leveltwo.html is the next html file . Lets say you have 5 questions you name the 1st html file levelone.html then the 2nd leveltwo.html and
then the third levelthree.html you get the idea. And each html file will contain a different question and answers.
<button type="button" style="width:80px;height:60px;"
onclick="wrong()" >Clark the Nerd</button> ----- the part where is says clark the nerd is what will be displayed on the button.
Also note as you make more quiz pages change the location of the wrong() and location.href="" so that the user doesn't press
the same button to answer the question on each screen.
Well there you have it!!! You have made a pop quiz game on andromo , it might seem like alot of typing if your new but you will get used
to it plus once you have done it one time, you can copy and paste it on another blank html file and just edit it without retyping everything.
Here is an example source file run it on computer. It has 2 levels
http://sourceforge.net/projects/andromoapps/files/example.zip/download
And here is an apk with a full game
http://sourceforge.net/projects/andromoapps/files/PopMovieQuiz.apk/download
As always if you have any questions just ask here or contact me via email pixelpower12@gmail.com .
Tagged:
Comments
1) For beginners new to html
2) For full control you can change the size of images, where they are located oscreen by just
tweaking the style=" " . Saving developers a ton of time when developing.
Also I didnt include the Meta code to scale the screen because I used the style to control things and
plus that code doesnt always scale properly.