1

JavaScript のみを使用します。4 つの質問の配列、4 つの回答の配列、および 4 つの不正解の配列があります。注文により配列を使用します。最初の問題が表示されると、コンピューターが乱数を生成し、この数字に基づいて、正しい答えを左または右に配置し、間違った答えを別の場所に配置します。これらの回答を含む左右の div に 2 つのイベント ハンドラーを登録します。
個人は質問に基づいて左または右の div を選択し、4 つの質問の後、あなたがどれだけうまくできたかを教えてくれます。

私の問題は、彼らがどちらの側を選んだか、そしてそれが正しいか間違っているかをどのように判断するかです. event.target.id を使用して、その人が何を選択したかを判断できますが、それがランダムであることを知っている正しい答えと比較するにはどうすればよいですか??

私はとても新しいです...私は新しいと言いましたか..ここに私が試したコードを示します..単純だと思いますが、間違ったイベントリスナーを完成させていませんでした。そして、キャメルケーシングは知っていますが、最初にラフカットを取得したかったのです

window.onload = function () {
    var questions = new Array();
    questions[0] = "This is the first question";
    questions[1] = "This is the second question";
    questions[2] = "This is the third question";
    questions[3] = "This is the fourth question";

    var answers = new Array();
    answers[0] = "first answer";
    answers[1] = "second answer";
    answers[2] = "third answer";
    answers[3] = "fourth answer";

    var garbage = new Array();
    garbage[0] = "first garbage";
    garbage[1] = "second garbage";
    garbage[2] = "third garbage";
    garbage[3] = "fourth garbage";

    var k = 0;
    var q = document.getElementById("questionId");
    var a = document.getElementById("left");
    var g = document.getElementById("right");
    var nxtquestion = document.getElementById('nextquestion');

    nxtquestion.addEventListener('mousedown', nextquestion, false);
    a.addEventListener('mousedown', rightwrong, false);
    g.addEventListener('mousedown', rightwrong, false);

    function nextquestion() {
        for (var i = 0; i < questions.length; i++) {
            q.innerHTML = questions[k];
        }
        randomize(k);
        k++;
        if (k > questions.length) {
            q.innerHTML = "Great, you have finished.  Please reload the page to play again!";
            a.innerHTML = "";
            g.innerHTML = "";
            nxtquestion.style.display = "none";
        }
        return;
    }

    function randomize(k) {
        var randomizer = Math.floor((Math.random() * 10) + 1);

        if (randomizer <= 5) {
            a.innerHTML = answers[k];
            g.innerHTML = garbage[k];
        } else {
            g.innerHTML = answers[k];
            a.innerHTML = garbage[k];
        }
    }
}

ここにHTMLがあります

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>chapter 1</title>
<link rel="stylesheet" type="text/css" href="regart.css">
<script src="regart.js">
</script>
</head>
<body>
<header>
<img class="center" src="regart.jpg" width="278" height="113" alt="regart" />
</header>
<div class="middlesection">
<p id="questionId" class="question">Let's Play RegArt!<br /> Choose either left or right for the correct answer.<br /> To begin, click on the 'Next Question' button. </p><input type="button" id="nextquestion" value="Next Question" />
<p id="howmany"></p>

</div>

<div>
<div class="answerleft" id="left"><p>Left</p></div>  <div class="answerright" id="right"><p>Right</p></div>
</div>
<footer>
</footer>
</body>
</html

Here is the CSS... the image will be missing but not important
header, footer, nav
 { display:block; }

html,ul, li, div, h1, h2, h3, p, img
 {margin:0; padding:0;}


body 
 { width:80%; margin:auto; max-width:960px; font-size:100%; background-color:#401d36;}

header { height:120px; background-color:#0f9fbf; }

img.center {display:block;margin:0 auto;}


.middlesection { background-color:#f2e085; padding:20px 20px 0 20px; height:200px;border-style:dashed; color:#401d36; border-width:thin;}

p {font-family:Baskerville, "Palatino Linotype", Palatino, "Century Schoolbook L", "Times New Roman", serif; font-size:1.2em; padding-left:10px; padding-bottom:30px;}



.answerleft {border-style:dashed; color:#0f9fbf; float:left; width:35%; padding:5%; height:200px; font-size:3em;  }
.answerright {border-style:dashed; color:#0f9fbf; float:right; width:35%; padding:5%; height:200px; font-size:3em; }
4

3 に答える 3

0

あなたが提供したコードには、1 つの重要な機能がありません。ただし、確認できるフィドルを作成しました。これで問題が解決し、そこから続行できると思います。

function randomize(k) {
        var randomizer = Math.floor((Math.random() * 10) + 1);

        if (randomizer <= 5) {
            a.innerHTML = answers[k];            
            g.innerHTML = garbage[k];
            a.addEventListener('mousedown', rightAnswer, false);
            g.addEventListener('mousedown', wrongAnswer, false);
        } else {
            g.innerHTML = answers[k];
            a.innerHTML = garbage[k];
            g.addEventListener('mousedown', rightAnswer, false);
            a.addEventListener('mousedown', wrongAnswer, false);
        }
    }

    function rightAnswer(){
        alert('You are right');
    }

    function wrongAnswer(){
         alert('You are wrong');
    }

http://jsfiddle.net/Pallab/ACXPN/embedded/result/

于 2013-09-12T05:57:31.743 に答える