To participate, please log in to your Andromo App Maker account then come back here!

**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 .



Comments

  • Also I know there are some other HTML coders with different stles and ways to do the same thing. I did this tutorial with 2 things in mind
    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.

  • Create Your Own App with Andromo


  • Big thank you 
  • edited January 2014
    Your welcome!! Right now I have been working on a lot of things , reading ebook sand tutorials . I want to start making action games but having a tough time looking for proper documentation. In the mean while I will make a couple of games using what I know to bring in some more users to andromo. My movie quiz game got 200 downloads 1st day on Opera and more downloads on forums and other places. Now on to the next project!!
  • Iam giving this a bump because I have seen some questions recently about making quiz app and using HTML as a dashboard so this should help with both problems.
  • Hi when i upload the app on andromo he can't passed to next question why ? 
Sign In or Register to comment.