Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 3 of 3
  1. #1
    New to the CF scene
    Join Date
    Jan 2013
    Posts
    3
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Prevent image from showing twice

    I'm trying to create a flag quiz but can't figure out how to prevent the same flag showing twice. Please help.

    [CODE]
    <form action="#" method="POST" id="myform" name="myform">
    <img class="flag" src="Flaggor/sveriges-flagga.png" alt="sweden"/>
    <img class="flag" src="Flaggor/usas-flagga.png" alt="usa"/>
    <img class="flag" src="Flaggor/armeniens-flagga.png" alt="armenia" />
    <img class="flag" src="Flaggor/azerbajdzjans-flagga.png" alt="azerbadjan" />
    <img class="flag" src="Flaggor/australiens-flagga.png" alt="australia" />
    <img class="flag" src="Flaggor/angolas-flagga.png" alt="angola" />
    <img class="flag" src="Flaggor/spaniens-flagga.png" alt="spain" />
    <img class="flag" src="Flaggor/afghanistans-flagga.png" alt="afghanistan" />
    <img class="flag" src="Flaggor/argentinas-flagga.png" alt="argentina" />
    <img class="flag" src="Flaggor/bahrains-flagga.png" alt="bahrain" />
    <img class="flag" src="Flaggor/brasiliens-flagga.png" alt="brazil" />
    <img class="flag" src="Flaggor/cyperns-flagga.png" alt="cyprus" />
    <img class="flag" src="Flaggor/frankrikes-flagga.png" alt="france" />
    <img class="flag" src="Flaggor/finlands-flagga.png" alt="finland" />
    <img class="flag" src="Flaggor/danmarks-flagga.png" alt="denmark" />
    <img class="flag" src="Flaggor/japans-flagga.png" alt="japan" />
    <img class="flag" src="Flaggor/indiens-flagga.png" alt="india" />
    <img class="flag" src="Flaggor/kinas-flagga.png" alt="china" />
    <img class="flag" src="Flaggor/kanadas-flagga.png" alt="canada" />
    <input type="text" id="answer" name="answer">

    <div id ="knapp">
    <input type="button" id="send" value="Answer the Question">
    </div>
    <div id="new">
    <input type="button" id="new_game" value="New Game" onclick="newGame()">
    </div>
    <div id="knapp1">
    <input type="button" id="next" value="Next Question" onclick="nextFlag()">
    </div>
    </form>
    <div id="gameOver">
    <p id="total"></p>
    </div>
    <div class="score">
    <p>Poäng:</p>
    <input type="text" name="points" id="points" readonly="readonly" class="knapp"/>
    </div>
    <p id="result"></p>

    <script>
    var score = 0;

    $().ready(function() {


    $("#send").live("click",function() {
    var answer = $("#answer");

    if(answer.val() == $(".flag:visible").attr("alt")) {
    score++;
    $("#result").html("VERY WELL THEN!");
    $("#points").val(score);
    $("#result").css('color','green');
    $("#knapp1").show();
    $("#knapp").hide();
    $("#new").hide();
    $("#cheat").hide();
    $("#gameOver").hide()


    }else {
    $("#result").html("BLAST!!");
    $("#points").val(score);
    $("#result").css('color','red');
    $("#knapp1").hide();
    $("#knapp").hide();
    $("#new").show();
    $(".score").hide();
    $("#gameOver").show();
    $("#total").html("You got: " + score + " Points");


    }

    });
    changeFlag();
    function changeFlag()
    {

    var antalFlags = $(".flag").size();
    var slumpad = Math.floor(Math.random()*17);
    $(".flag").eq(slumpad).show();

    }

    });
    var flagArray = null;

    Array.prototype.contains = function(obj) {
    var i = this.length;
    while (i--) {
    if (this[i] === obj) {
    return true;
    }
    }
    return false;
    }

    function nextFlag(){
    if(flagArray==null)
    flagArray = new Array();
    var antalFlags = $(".flag").size();
    var slumpad = Math.floor(Math.random()*17);

    if(flagArray.contains(slumpad))
    nextFlag();

    $(".flag").eq(slumpad).show();
    $(".flag").hide();
    $(".flag").eq(slumpad).show();
    $("#result").html("");
    $("#knapp1").hide();
    $("#knapp").show();
    $("#answer").val("");
    $("#cheat").hide();
    flagArray.push(slumpad);


    }
    function newGame(){
    var antalFlags = $(".flag").size();
    var slumpad = Math.floor(Math.random()*17);
    $(".flag").eq(slumpad).show();
    $(".flag").hide();
    $(".flag").eq(slumpad).show();
    $("#knapp1").hide();
    $("#knapp").show();
    $("#points").val(0);
    $("#result").html("");
    $("#new").hide();
    $("#answer").val("");
    $("#cheat").hide();
    $(".score").show();
    $("#gameOver").hide();
    score = 0;


    }





    </script>
    [CODE]

  • #2
    Supreme Master coder! Philip M's Avatar
    Join Date
    Jun 2002
    Location
    London, England
    Posts
    17,990
    Thanks
    203
    Thanked 2,536 Times in 2,514 Posts
    Instead of selecting a flag randomly, shuffle the array of flags images and then present them in order.

    Code:
    <script type="text/javascript">
    
    Array.prototype.shuffle = function() {
    var s = [];
    while (this.length) s.push(this.splice(Math.random() * this.length, 1));
    while (s.length) this.push(s.pop());
    return this;
    }
    
    var images= ["One.gif", "Two.gif", "Three.gif", "Four.gif","Five.gif","Six.gif", "Seven.gif", "Eight.gif"];
    var newarray = images.shuffle();
    alert (newarray);
    alert (newarray[0]);
    
    </script>

    The Epistles were the wives of the Apostles.
    - Pupil's answer to Catholic Elementary School test.
    Last edited by Philip M; 01-30-2013 at 08:07 AM.

    All the code given in this post has been tested and is intended to address the question asked.
    Unless stated otherwise it is not just a demonstration.

  • #3
    New to the CF scene
    Join Date
    Jan 2013
    Posts
    3
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Thanks

    Thanks Never thought about that. Great solution.


  •  

    Tags for this Thread

    Posting Permissions

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