0
localstorage를 사용하는 ipad 앱에 대한 퀴즈를 만들려고합니다. 내가 클릭 한 옵션을 기억하는 퀴즈를 성공적으로 만들었으며 대답이 올바른지 확인할 수 있습니다.퀴즈를 위해 localStorage에 여러 옵션 저장
그러나 몇 가지 질문에 대한 답변이 여러 개 있으며 여러 답변을 해당 질문의 배열로 저장할 수 있기를 바랍니다.
현재 내 퀴즈는 부모 div의 클래스 이름에 따라 키에 응답을 저장합니다. 대답은 클릭 한 LI에 따라 다릅니다. 내 코드는 아래를 참조하십시오.
질문 당 여러 개의 답변을 저장할 수있는 옵션을 원합니다. 내가 가지고있는 코드를 기반으로이 작업을 수행하는 방법은 무엇입니까? 나는 꽤 javascript에 새로워. 당신이 JSON.parse
storedObject = JSON.parse(localStorage.getItem(question));
var answersObject = {
answer1: 'yes',
answer2: 'no',
answer3: 'maybe'
};
localStorage.setItem(question, JSON.stringify(answersObject));
다시 로컬 스토리지에서이를 효율적으로 활용하려면 다음 작업을
<!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>
그리고 네, 저는 JS뿐만 아니라 JS를 사용하고 있다는 것을 알고 있습니다. – cloggy