www.webdeveloper.com
Results 1 to 6 of 6

Thread: Aircraft Recognition Quiz

  1. #1
    Join Date
    Aug 2012
    Posts
    6

    Aircraft Recognition Quiz

    Dear members,

    I'm trying to make a small 'website' for myself and for my fellow students in the military aviation school. The website is meant to test our knowledge.

    I have an indexpage where students could choose between aircraft, artillery, tanks, etc. I already found out how I could show random pictures of the chosen category, but now I'm looking for a good way to 'correct' the answers.
    (like a true / false or something) I don't want to make a multiple choice quiz, because then we could eliminate the answers. I hoped to find a way to let the students fill in the answer in a text field and then a pop-up would appear to say whether the answer is correct or not. I hope someone can help me with a short and clear code somewhere...

    An other thing is that I don't want to use PHP, because I'm a newbie in the first place, but I also heard that not every server supports it.

    This is what I already have. (for each aircraft a page like this, with random pictures otherwise we could remember the pictures instead of the aircraft itself) Later I want to find a system that changes the order of aircraft-pages, so that we won't memorize the order too... but first I'll start with this.

    Thank you
    ____
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>Aircraft Recognition</title>

    <script type="text/javascript">
    function test()
    {
    window.alert(document.naam.tekstregel.value)
    }
    </script>

    <body bgcolor="#999999">


    <h1 align="center">Aircraft Recognition</h1>
    <center>
    <p><script language="JavaScript"><!--

    var pictures = ['1.jpg', '2.jpg', '3.jpg'];

    var picture = pictures[Math.floor(Math.random() * pictures.length)];

    document.write('<img src="' + picture + '"/>');

    // --></script><noscript><img src="4.jpg"/></noscript></p>


    <form name="naam">
    <input type="text" name="tekstregel" size="25">
    <input type="button" value="OK" onClick="test()"></form>


    </SCRIPT>



    </center>
    </body>
    </html>

  2. #2
    Join Date
    Aug 2012
    Posts
    3
    Hi,

    in my opinion you should not use Javascript because all the code you write will be vivible to who are filling the test, and therefore the answers too. You can obfuscate but an array with pictures and answers could be easyly identifiable.
    I think is better to made that code run in the server... The code you need to generate a question is not too complex and most servers support php (though not all as you say).
    Well, it's an opinion, I understand your reasons and one step at a time...

    Regarding how to check the answers, another problem you'll encounter is that in the military environment the crafts have... "particular" names...:
    "Fairchild Republic A-10 Thunderbolt II", well, which is the correct answer? A-10? A-10 Thunderbolt II? A-10 Thunderbolt 2?
    what happens when somebody write a misspelling error? I think in this type of answer is very usual :P...

    You'll need a way to detect an approximate answer to indicate it. A simple way to do it is using jsdifflib: http://snowtide.com/jsdifflib

    A sample using your code could be:
    ---
    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>Aircraft Recognition</title>
    
    <script type="text/javascript" src="difflib.js"></script>
    
    <script type="text/javascript"> 
    	
    var totalQuestions = 0;
    var score = 0;
    
    var testData = [ ['1.png', 'Picture P1'],
                     ['2.png', 'Picture P2'],
                     ['3.png', 'Image I1'],
                     ['4.png', 'Image of aircraft IA1']];
    
    var questionId = 0;
    	
    /*
     * Using difflib we are testing if is an approximation
     */
    function IsApproximate (stCorrect, stAnswer)
    {
    	var sm = new difflib.SequenceMatcher(stCorrect, stAnswer);	
    	return sm.ratio();;
    }
    
    /* Create a new question ;)
     */
    function createQuestion()
    {
    	totalQuestions++;
    	// Update Total Questions Label:
    	document.getElementById('questions').innerHTML = totalQuestions.toString();
    	
    	// Prepare a new question Id:
    	questionId = Math.floor(Math.random() * testData.length);
    	document.getElementById('imageTest').src = testData[questionId][0];
    	
    	// This line is for debug purpose only:
    	document.getElementById('debug').innerHTML = testData[questionId][1];
    }
    
    /* Update Score Points
     */
    function updateScore(points)
    {
    	score+=points;
    	// Update Total Questions Label:
    	document.getElementById('score').innerHTML = score.toString();
    }
    
    /* Check Answer
     */
    function checkAnswer(questionId) 
    {
    	// If we have an approximation we can let the user retry
    	var retry = false;
    	
    	// Get the ratio approximation:
    	var ratio = IsApproximate (testData[questionId][1], document.naam.tekstregel.value );
    	
    	// Response is Exact!
    	if ( ratio == 1 )
    	{
    		window.alert("Exact!");
    		updateScore(5); // 5 points up in the score!
    	} 
    	else if ( ratio > 0.5 ) // My limit to consider the answers Valid is 0.5 (must be adjusted!)
    	{
    		// I let him to retry, if it's an approximation (may be not infinitely ;) )
    		retry = window.confirm("Approximate: "+ratio.toString()+"\nRetry?");
    		
    		if ( retry == false) {
    			window.alert ("Correct Answer is: "+ testData[questionId][1]);
    			updateScore(1); // only 1 point up in score!
    		}
    	}
    	else
    	{
    		window.alert("Fail!\nCorrect Answer is: "+ testData[questionId][1]);
    	}
    	
    	// If is retrying, don't generate new question
    	if ( retry == false )
    	   createQuestion();
    }
    </script>
    
    <body bgcolor="#999999">
    
    <h1 align="center">Aircraft Recognition</h1>
    <center>
    
    <div id="scores">
    	<h2><b>Questions:</b><span id="questions">0</span></h2>
    	<h2><b>Score:</b><span id="score">0</span></h2>
    </div>
    
    <img id="imageTest" src="#" />
    
    <!-- For Debug Only, REMOVE IT! -->
    <br/><span id="debug"> </span><br/>
    
    <form name="naam">
     <input type="text" name="tekstregel" size="25"> 
     <input type="button" value="OK" onClick="checkAnswer(questionId)">
    </form>
    
    <script language="JavaScript">
    	createQuestion();
    </script>
    
    </center>
    </body>
    </html>
    ---
    (I've taken the liberty to change some things and expand some others... )

    On the other hand , some friends and I have made this game for iPhone/iPad/Android that could be usefull to you and your fellow students :

    http://4figapps.com/aircraftquiz
    (there are a free version)

    If you test it and you find any image or information helpful, don't hesitate to asking me.

    Kind regards,
    Andres

  3. #3
    Join Date
    Aug 2012
    Posts
    6
    Hi rodri_wan...

    well I must say that you're right about the quiz, but because it's not really meant to be a public website (only a tool for us) I guess I don't need to secure or hide to much. I just hope that those guys won't go in the source to check the answers...

    I actually made something already and I must say that it works, but as you said it has some issues....

    please check the code here...
    ----
    <!DOCTYPE html>
    <html xmlns="XHTML namespace">
    <head>

    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>Aircraft Recognition</title>

    <script type="text/javascript">
    function test()
    {


    var image = document.getElementById("image").src;
    var antwoord = "";
    if(image.indexOf("1.jpg") >= 0){
    antwoord = "f-16 fighting falcon"
    }

    if(image.indexOf("2.jpg") >= 0){
    antwoord = "f-16 fighting falcon";
    }

    if(image.indexOf("3.jpg") >= 0){
    antwoord = "f-16 fighting falcon";
    }
    if(image.indexOf("4.jpg") >= 0){
    antwoord = "f-16 fighting falcon";
    }
    if(image.indexOf("5.jpg") >= 0){
    antwoord = "f-16 fighting falcon";
    }
    if(image.indexOf("6.jpg") >= 0){
    antwoord = "jas 39 gripen";
    }
    if(image.indexOf("7.jpg") >= 0){
    antwoord = "jas 39 gripen";
    }
    if(image.indexOf("8.jpg") >= 0){
    antwoord = "jas 39 gripen";
    }
    if(image.indexOf("9.jpg") >= 0){
    antwoord = "jas 39 gripen";
    }
    if(image.indexOf("10.jpg") >= 0){
    antwoord = "jas 39 gripen";
    }
    if(image.indexOf("11.jpg") >= 0){
    antwoord = "mirage f1"
    }

    ...

    }
    if(image.indexOf("55.jpg") >= 0){
    antwoord = "su 24 fencer";
    }
    if(image.indexOf("56.jpg") >= 0){
    antwoord = "tornado";
    }
    if(image.indexOf("57.jpg") >= 0){
    antwoord = "tornado";
    }
    if(image.indexOf("58.jpg") >= 0){
    antwoord = "tornado";
    }
    if(image.indexOf("59.jpg") >= 0){
    antwoord = "tornado";
    }
    if(image.indexOf("60.jpg") >= 0){
    antwoord = "tornado";
    }
    var control = document.getElementById("contr")

    if (control.value == antwoord){
    confirm("juist")
    document.location.reload(true)
    }
    else
    {
    confirm("fout")

    }


    }
    </script>
    <script>


    function onload(){
    var imgsrc = document.getElementById("image").src;
    var img = new Image();
    img.src = imgsrc;
    var imgwidth = img.width;
    if(imgwidth > 500){
    document.getElementById("image").width=500;
    }
    }
    </script>

    </head>
    <body onload="onload()" bgcolor="#999999">



    <h1 align="center">Aircraft Recognition</h1>
    <center>
    <p><script language="JavaScript"><!--

    var pictures = ['1.jpg', '2.jpg', '3.jpg', '4.jpg', '5.jpg', '6.jpg', '7.jpg', '8.jpg', '9.jpg', '10.jpg', '11.jpg', '12.jpg', '13.jpg', '14.jpg', '15.jpg', '16.jpg', '17.jpg', '18.jpg', '19.jpg', '20.jpg', '21.jpg', '22.jpg', '23.jpg', '24.jpg', '25.jpg', '26.jpg', '27.jpg', '28.jpg', '29.jpg', '30.jpg', '31.jpg', '32.jpg', '33.jpg', '34.jpg', '35.jpg', '36.jpg', '37.jpg', '38.jpg', '39.jpg', '40.jpg', '41.jpg', '42.jpg', '43.jpg', '44.jpg', '45.jpg', '46.jpg', '47.jpg', '48.jpg', '49.jpg', '50.jpg', '51.jpg', '52.jpg', '53.jpg', '54.jpg', '55.jpg', '56.jpg', '57.jpg', '58.jpg', '59.jpg', '60.jpg'];

    var picture = pictures[Math.floor(Math.random() * pictures.length)];

    document.write('<img src="' + picture + '" id="image"/>');


    // --></script><noscript><img src="4.jpg"/></noscript></p>


    <form name="naam">
    <input type="text" name="tekstregel" size="25" id="contr"/>
    <input type="button" value="OK" onClick="test()"/>
    </form>


    </center>
    </body>
    </html>


    -----



    And about the app you helped making... uhm... I already played it more than 100times! it's a super great application... I found it a couple months ago and that app actually boomed my knowledge!
    I'm not that good in civil yet, but the 'modern military' has my focus now! ;p
    the only thing about it is that after a while you start to know the pictures instead of the aircraft themselves and that's why I have 5 different pictures per aircraft. Maybe that's something for a new update
    It's quiet special actually, because it is since I installed your app that I wanted to make something similar but personalized, and that's how I came here...


    thx a lot already

  4. #4
    Join Date
    Aug 2012
    Posts
    3

    Using difflib.js in a Quiz for approximated answers

    Hi,

    Did you try the code I included in my previous post?

    I think that if you have one bidimensional array for data is more easy to add new aircraft when you want (and the correct answer too):

    Code:
    var testData = [ ['1.jpg', 'f-16 fighting falcon'],
                     ['2.jpg', 'f-16 fighting falcon'],
                     ['3.jpg', 'f-16 fighting falcon'],
                     ['4.jpg', 'f-16 fighting falcon'],
                     ['5.jpg', 'f-16 fighting falcon'],
                     ['6.jpg', 'jas 39 gripen'],
                     /* more and more and more aircraft */
                   ];
    Then you'll find the image at: testData[indexAircraft][0], and the correct answer at testData[indexAircraft][1]

    On the other hand, you can use the function "IsApproximate" to determinate if the answer was correct enought, only adjusting the value returned that will be between 0 and 1.

    Code:
    function IsApproximate (stCorrect, stAnswer)
    {
    	var sm = new difflib.SequenceMatcher(stCorrect, stAnswer);	
    	return sm.ratio();;
    }
    (In my example, to an exact result, ratio: 1, is giving 5 points to the user, and for an approximate result, ratio > 0.5, the user can retry or add 1 point to the score. This was only an example, you´ll can do any other implementation.

    To use this function, you'll need the library: jsdifflib, but only downloading this source: https://raw.github.com/cemerick/jsdi...ter/difflib.js and including it in your html header:
    Code:
    <script type="text/javascript" src="difflib.js"></script>
    must be enought.

    Even more, in my example I included a div to contain Score and total answers.

    If this piece of code is not useful to you, please tell me exactly your doubts and I'll try to resolve them.

    Regards,
    Andrés.

    Ah! We'll take into account your suggestion about Aircraft Recognition Quiz thanks a lot.

  5. #5
    Join Date
    Aug 2012
    Posts
    6
    thx man... the scores are a great update!
    I tried the code and I tried to it fill in, but something is still missing...

    The pictures appear, but I can't verify my answers... (nothing happens when I click the button)
    I guess I didn't give the answers a value or something, but in the same time the correct answers appear next to the picture. I reckon I wrote the correct answers at a wrong place...

    can you check it once again, pls?


    code.
    ----

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>Aircraft Recognition</title>

    <script type="text/javascript" src="difflib.js"></script>

    <script type="text/javascript">

    var totalQuestions = 0;
    var score = 0;

    var testData = [ ['1.jpg', 'f-16 fighting falcon'],
    ['2.jpg', 'f-16 fighting falcon'],
    ['3.jpg', 'f-16 fighting falcon'],
    ['4.jpg', 'f-16 fighting falcon']];

    var questionId = 0;

    /*
    * Using difflib we are testing if is an approximation
    */
    function IsApproximate (stCorrect, stAnswer)
    {
    var sm = new difflib.SequenceMatcher(stCorrect, stAnswer);
    return sm.ratio();;
    }

    /* Create a new question
    */
    function createQuestion()
    {
    totalQuestions++;
    // Update Total Questions Label:
    document.getElementById('questions').innerHTML = totalQuestions.toString();

    // Prepare a new question Id:
    questionId = Math.floor(Math.random() * testData.length);
    document.getElementById('imageTest').src = testData[questionId][0];

    // This line is for debug purpose only:
    document.getElementById('debug').innerHTML = testData[questionId][1];
    }

    /* Update Score Points
    */
    function updateScore(points)
    {
    score+=points;
    // Update Total Questions Label:
    document.getElementById('score').innerHTML = score.toString();
    }

    /* Check Answer
    */
    function checkAnswer(questionId)
    {
    // If we have an approximation we can let the user retry
    var retry = false;

    // Get the ratio approximation:
    var ratio = IsApproximate (testData[questionId][1], document.naam.tekstregel.value );

    // Response is Exact!
    if ( ratio == 1 )
    {
    window.alert("Exact!");
    updateScore(5); // 5 points up in the score!
    }
    else if ( ratio > 0.5 ) // My limit to consider the answers Valid is 0.5 (must be adjusted!)
    {
    // I let him to retry, if it's an approximation (may be not infinitely )
    retry = window.confirm("Approximate: "+ratio.toString()+"\nRetry?");

    if ( retry == false) {
    window.alert ("Correct Answer is: "+ testData[questionId][1]);
    updateScore(1); // only 1 point up in score!
    }
    }
    else
    {
    window.alert("Fail!\nCorrect Answer is: "+ testData[questionId][1]);
    }

    // If is retrying, don't generate new question
    if ( retry == false )
    createQuestion();
    }
    </script>

    <body bgcolor="#999999">

    <h1 align="center">Aircraft Recognition</h1>
    <center>

    <div id="scores">
    <h2><b>Questions:</b><span id="questions">0</span></h2>
    <h2><b>Score:</b><span id="score">0</span></h2>
    </div>

    <img id="imageTest" src="#" />

    <!-- For Debug Only, REMOVE IT! -->
    <br/><span id="debug"> </span><br/>

    <form name="naam">
    <input type="text" name="tekstregel" size="25">
    <input type="button" value="OK" onClick="checkAnswer(questionId)">
    </form>

    <script language="JavaScript">
    createQuestion();
    </script>

    </center>
    </body>
    </html>

  6. #6
    Join Date
    Aug 2012
    Posts
    3
    Hi again!

    you need to have downloaded the library: jsdifflib from lhis link:

    https://raw.github.com/cemerick/jsdi...ter/difflib.js

    Did you ?

    Then copy it to the same directory than your html and try again.

    If is still not working send me a private message to continue this conversation by email and we put a final message in the forum when all be cleared .

    Kind regards,

    ----
    Andrés R.
    4fig Development Team

    http://www.4figapps.com
    Bored of word games? Try aMathing
    ----

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  
HTML5 Development Center



Recent Articles