0

私は現在、li のクリックを記録し、その内容を localStorage に保存しています。

現在、選択した回答が保存されていますが、気が変わった場合は最後にクリックしたもので上書きされます。

これは、単一選択の質問にはうまく機能しますが、複数の回答が許可されている質問には機能しません。

私がする必要があるのは、すべてのクリックを記録して配列として保存できるようにすることです。

これが私の既存のコードです：

<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>test</title>

<style type="text/css">

body{
    text-align: center;
}

#questions{
    margin: 0 auto;
    width: 802px;
    height: 602px;
}

/*look for any class that has the word slide in it*/
[class*="slide"]{
    padding: 20px;
    background: #666;
    width: 760px;
    height: 560px;
    border: 1px dashed #333;
}
[class*="slide"]:nth-child(odd){
    background: #999;
}

b{
    position: absolute;
    top: 10px;
}


</style>

</head>

<body>
    <div id="questions">
        <div class="slide1">
            <h1>What is h2o?</h1>
            <ul>
                <li>A Pencil</li>
                <li>Liquid water</li>
                <li>A mobile phone network</li>
                <li>Paper</li>
            </ul>
            <p>check</p>
        </div>
        <div class="slide2">
            <h1>What is 2 + 2?</h1>
            <ul>
                <li>1</li>
                <li>2</li>
                <li>3</li>
                <li>4</li>
            </ul>
            <p>check</p>
        </div>
        <div class="slide3">
            <h1>What is a whale?</h1>
            <ul>
                <li>A mammal</li>
                <li>A fish</li>
                <li>A bird</li>
                <li>A country</li>
            </ul>
        </div>
        <div class="slide4">
            <h1>What phone do you prefer?</h1>
        <ul>
                <li>iPhone 4s</li>
                <li>iPhone 5</li>
            </ul>
        </div>
        <div class="slide5">
            <h1>What is 5 + 5?</h1>
            <ul>
                <li>10</li>
                <li>7</li>
            </ul>
        </div>
        <div class="slide6">
            <h1>What is the capital city of England?</h1>
            <ul>
                <li>London</li>
                <li>Staines</li>
                <li>Bognor Regis</li>
                <li>Luton</li>
            </ul>
        </div>
        <div class="slide7">
            <h1>What colour is a red phone box?</h1>
            <ul>
                <li>Blue</li>
                <li>Red</li>
                <li>Pink</li>
                <li>Mauve</li>
            </ul>
        </div>
    </div>
    <b></b>
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>

<script type="text/javascript">

$(document).ready(function() {

    /*
    //
    //  quiz storer and answer checker
    //  Author: Tjobbe Andrews
    //  v1.0, 13/02/2013
    //  - keeps a record in localStorage of the answers you chose, then checks them on an ad hoc basis
    //
    */

    //on clicking the answers in the li's..
    $("li").click(function(){
        //..create a variable called answer based on the content of that li..
        var answer = $(this).html();
        //..and create a variable called question based on the class of the parent div
        var question = $(this).parent().parent().attr("class");
        //then store the key value pair of question and answer
        localStorage.setItem(question, answer);
        //just makes sure that it's writing to the LS db
        $("b").html(localStorage.getItem(question));
    });

    //click the p tag to check what we've got stored for this div - ad hoc
    $('p').click(function(){
        var slideNumber = $(this).closest('div').attr('class');
        var answer = localStorage.getItem(slideNumber);
        if(answer !== "Liquid water"){
            alert('wrong');
        }
        else if(answer == "Liquid water"){
            alert("right");
        }
    });

});
</script>

</body>
</html>
4

1 に答える 1

1

配列をそのまま localStorage に格納することはできませんが、配列を簡単に JSON 文字列に変換して代わりに格納することができます。ブラウザーがサポートしている場合は、JSON.stringify と JSON.parse を使用できます。それ以外の場合は、JSON ライブラリをダウンロードします。

于 2013-02-14T23:11:52.223 に答える