轮播 - 循环 - 每张幻灯片的动作

Question

我想使用每张幻灯片作为问题，而不是普通的轮播。 在每张幻灯片/问题下方，您需要选择回答。

视觉我已经成功了：

demohttp://jsfiddle.net/surveydesigners/7wo1vx94/3/

我正在使用 bootstrap + carousel 幻灯片选项。 不确定轮播是否是实现这一目标的正确选择。 但我需要保存每个幻灯片/问题的每个答案。

任何想法如何正确地做到这一点？

                      <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');      

Answer 1

如果是我，我不一定会将其视为我必须使用“旋转木马”本身的东西......它主要只是一种测验类型的情况，所以你有：

1.) 一个 JSON 问题数组，每个问题都有对象 2.) 答案选项 3.) 正确答案

（注意：如果您使用 JSON 来存储您的答案，那么查看源代码并可以查看所有 javascript 的用户将可以看到它......所以如果有必要，我什至可以将答案存储在网络中服务，我发送帖子以将答案作为响应返回，然后检查其是否正确。但为了这个特定的用例，我们将保持简单）。

所以我的问题看起来像：

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 之前，我会检查我们是否到达了 LAST 问题，如果达到了，我将打破循环并显示一些 END UI 元素/信息。

所以强迫它成为一个轮播可能会让它更难做，我在脑海中构想它的方式（注意我可能不符合你使用轮播概念的推理）它相对容易实现并且使用你自己的 jQuery 会给你更多的灵活性。祝你好运。

更新：这是一个粗略的（未完成的）小提琴示例，说明我可能会如何处理它……非常非常粗糙且未完成。 [http://jsfiddle.net/tamak/nvbeLxx5/7/]

Answer 2

抱歉回复晚了。 感谢您的回答 - 虽然它有点不同，但我认为这也适用于我 - 非常感谢您提供这个！