我想用每张幻灯片作为问题而不是普通的轮播。 在每个幻灯片/问题下方,您需要选择回答。
视觉我有它的工作:
demo
http://jsfiddle.net/surveydesigners/7wo1vx94/3/
我正在使用bootstrap + carousel slide选项。 不确定旋转木马是否是实现此目的的正确选择。 但我需要保存每个幻灯片/问题的每个答案。
任何想法如何正确地做到这一点?
<div id="carousel-example-generic" class="carousel slide" data-ride="carousel" data-interval="false" data-wrap="false">
<!-- Wrapper for slides -->
<div class="carousel-inner" role="listbox">
<div class="item active">
<div class="carouseldiv1" id="c1">1/3<br />Lorem ipsum dolor sit amet, consectetur adipiscing elit.</div>
</div>
<div class="item">
<div class="carouseldiv1" id="c2">2/3<br />Lorem ipsum dolor sit amet, consectetur adipiscing elit.</div>
</div>
<div class="item">
<div class="carouseldiv1" id="c3">3/3<br />Lorem ipsum dolor sit amet, consectetur adipiscing elit.</div>
</div>
<div class="item">
<div class="carouseldivend">All done - thank you!<br /><img src="icons/checkmr.png" width="16px" height="16px" /></div>
</div>
</div>
<div class="carouselcontrol">
<a href="#carousel-example-generic" id="answer1" role="button" data-slide="next" type="button" class="btn btn-success btn-sm">1</a>
<a href="#carousel-example-generic" id="answer2" role="button" data-slide="next" type="button" class="btn btn-primary btn-sm">2</a>
<a href="#carousel-example-generic" id="answer3" role="button" data-slide="next" type="button" class="btn btn-info btn-sm">3</a>
<a href="#carousel-example-generic" id="answer4" role="button" data-slide="next" type="button" class="btn btn-warning btn-sm">4</a>
<a href="#carousel-example-generic" id="answer5" role="button" data-slide="next" type="button" class="btn btn-danger btn-sm">5</a>
<br /><br />
<a href="#carousel-example-generic" role="button" data-slide-to="0" type="button" class="btn btn-default btn-sm">re-start</a>
</div>
<br />
<p class="txtmini">1 = totally agree || 5 = totally disagree</p>
</div>
然后代码应该是
IF C1 AND answer1 do ...
IF C1 AND answer2 do ...
IF C2 AND answer1 do ...
IF C2 AND answer2 do ...
etc.
$('#c1').click(function () {
localStorage.setItem('C1', 'Answer1');
localStorage.setItem('C2', 'Answer2');
localStorage.setItem('C3', 'Answer3');
localStorage.setItem('C4', 'Answer4');
localStorage.setItem('C5', 'Answer5');
答案 0 :(得分:0)
如果是我,我不一定会把它视为我必须使用的东西&#34; carousel&#34;本身......它主要只是一种测验类型的情况,所以你有:
1。)一个JSON问题数组,每个问题都有对象 2.)答案选项 3.)正确答案
(注意:如果您使用JSON存储您的答案,那么查看源代码的用户可以看到它并且可以看到所有的javascript ...所以如果有必要,我甚至可以将答案存储在一个Web服务,我发送帖子作为回复得到答案,然后检查它是否正确。但我们只是为了这个特定的用例而保持简单。)
所以我的问题看起来像是:
var myQuestions = [
{"qCount": "1", "qText": "Why did Theon and Sansa Jump?", "qAnswers": "Answer1|Answer2|Answer3|Answer4", "qCorrectAnswer": "3"},
{"qCount": "1", "qText": "Why did Theon and Sansa Jump?", "qAnswers": "Answer1|Answer2|Answer3|Answer4"}, {"qCount": "1", "qText": "Who is Reek?", "qAnswers": "Answer1|Answer2|Answer3|Answer4", "qCorrectAnswer": "1"},
{"qCount": "1", "qText": "Did Brienne kill Stannis?", "qAnswers": "Answer1|Answer2|Answer3|Answer4", "qCorrectAnswer": "2"}
];
现在我只使用jQuerys .each来循环并显示每个问题,使用split将问题选项显示为问题下方的LI项目,并将点击项目的索引(位置)与qCorrectAnswer值进行比较(用于在基于|字符分割后对应正确答案的位置。
在显示他们的选择结果后,我会存储他们的答案(我可能会使用cookie而不是本地存储(主要是因为我最近有一个恐怖故事试图在应用程序中使用本地存储,只是我缺乏知识我愿意打赌))。几秒钟后,将当前显示的问题和答案选项替换为JSON阵列中设置的NEXT。在显示NEXT之前,我会检查我们是否已经达到最后一个问题,如果有的话,我将打破周期并显示一些END UI元素/信息。< / p>
所以强迫它成为一个旋转木马可能会让它变得更难,我想到它的方式(注意我可能与你使用旋转木马概念的理由不一致)其实施相对简单并使用您自己的jQuery为您提供更大的灵活性。祝你好运。
更新:这是一个粗略的(未完成的)小提琴示例,说明我可能会接近它...非常非常粗糙和未完成。 [http://jsfiddle.net/tamak/nvbeLxx5/7/]
答案 1 :(得分:0)