Question

我正在尝试在java脚本中创建匹配游戏，您可以将正确的动物图案与动物匹配。到目前为止我在游戏中有三个问题，当我尝试添加更多时，游戏没有显示任何问题..

如果有人能提供任何帮助，那就太棒了。

这是代码..

    <html>   
    <head>
    <Script>

    function randSort (a,b) {return Math.random() - 0.5}

    var questions = [
    {text: " What animal is this?", img: "AnimalPrints/1.jpg", answers: ["Cheetah", "Tiger", "Ladybird"], ans: "0"},

    {text: " What animal is this one?", img: "AnimalPrints/2.jpg", answers: ["Elephant", "Giraffe", "Snake"], ans: "1"},

    {text: "What animal is this one please?", img: "AnimalPrints/3.jpg", answers: ["Bumblebee", "Tiger", "Lady bird"], ans: "2"}

    /////**part I added**///

    {text: "What animal is this one please?", img: "AnimalPrints/4.jpg", answers: ["Giraffe", "Butterfly", "Monkey"], ans: "2"}

    ];

    var correctCount = 0;
    var currentQ = 0;

    function select(nr) {
        if (nr == questions[currentQ].ans)
        {
            correctCount++;
            document.getElementById('display').innerHTML= "You win"
        }
        else
        {
            document.getElementById('display').innerHTML= "You lose"
        }

        document.getElementById('display').innerHTML += "<p>Score: "+ correctCount; 
        // if its the last one

        nextQ(); 
    }    

    function showQ() {
        document.getElementById('questionText').innerHTML = questions[currentQ].text;  
        document.getElementById('animalPrint').src = questions[currentQ].img;

        newhtml = "";
        for (var i = 0; i< questions[currentQ].answers.length; i++)
        {
            newhtml+= "<button onclick = 'select(" + i + ")'>"+ questions[currentQ].answers[i] + "</button>";

        }

        document.getElementById('alloptions').innerHTML = newhtml;
    }


    function nextQ(){
        if (currentQ < questions.length-1)
        {    
            currentQ++;

            showQ();
        }

    }

    window.onload =init;

    function init()
    {
        correctCount = 0;
        questions.sort(randSort);
        currentQ = 0;
        showQ();
    }



    </script>
        <title> Game_page</title>
        <link rel="stylesheet" type="text/css" href ="gamepage_css.css">
            <script type = "text/javascript">
    /*
                    document.write("<img src = \ "" + Math.floor 1 + Math.random() * 10) +
                    ".jpg\" />");



                    document.write("<img src = \"" + Math.floor 1 + Math.random() * )
    */                

            </script>        

    </head>
    <body>
        <div id = main>
            <div id = "questionText"> Testing</div>
            <div id ="animal">
                <img id = "animalPrint" src = "AnimalPrints/1.jpg">
            </div>
            <div id = "alloptions">
            </div>


            <button id = "nextbutton" onclick = "nextQ();">
            </button></a>


        </div>

        <div id = "display">    Score:    </div>

    </body>
    </html>

和CSS

body {
    background-position: center;
    background-color:lime;
}

#questionText {width: 350px; background: white;}


#nextbutton {
    background-image: url(Buttons/nextbutton.jpg);
    background-size:contain;
    background-repeat:repeat-y;
    background-position: center;
    width:100px;
    height:44px;
    margin-left: 250px;
    border-radius:10px;
}


#main {
    margin-top:200px;
    margin-left:250px;
    border:1px solid red;
    width:600px;
}

#display {
    width:150px;
    height:50px;
    background-color:blue;
    color:white;
    border-radius:5px;
    font-family:aqua;
}

Answer 1

我试图改变答案，这对我有用

var questions = [
{text: " What animal is this?", img: "AnimalPrints/1.jpg", answers: ["Cheetah", "Tiger", "Ladybird"], ans: "0"},

{text: " What animal is this one?", img: "AnimalPrints/2.jpg", answers: ["Elephant", "Giraffe", "Snake"], ans: "1"},

{text: "What animal is this one please?", img: "AnimalPrints/3.jpg", answers: ["Bumblebee", "Tiger", "Lady bird"], ans: "2"},
{text: "test question?", img: "AnimalPrints/3.jpg", answers: ["answer 1", "answer 2", "answer 3"], ans: "2"}
];

Answer 2

看来Four_lo在他/她的评论中建议你在数组中的第三个选择之后缺少“，”。这样做会显示它。

http://jsbin.com/quvadekaru/1/edit

Java脚本游戏 - 添加更多问题

2 个答案: