Warning: file_get_contents(/data/phpspider/zhask/data//catemap/5/flutter/10.json): failed to open stream: No such file or directory in /data/phpspider/zhask/libs/function.php on line 167

Warning: Invalid argument supplied for foreach() in /data/phpspider/zhask/libs/tag.function.php on line 1116

Notice: Undefined index: in /data/phpspider/zhask/libs/function.php on line 180

Warning: array_chunk() expects parameter 1 to be array, null given in /data/phpspider/zhask/libs/function.php on line 181
Jquery 转盘-循环-每个幻灯片的操作_Jquery_Twitter Bootstrap_Carousel - Fatal编程技术网

Jquery 转盘-循环-每个幻灯片的操作

Jquery 转盘-循环-每个幻灯片的操作,jquery,twitter-bootstrap,carousel,Jquery,Twitter Bootstrap,Carousel,我想用每张幻灯片作为问题,而不是普通的旋转木马。 在每张幻灯片/问题下方,您需要选择回答 视觉效果:我让它工作: demo 我正在使用引导+转盘滑动选项。 不确定旋转木马是否是实现此目的的正确选项。 但我需要保存每张幻灯片/问题的每个答案 有没有正确的方法 <div id="carousel-example-generic" class="carousel slide" data-ride="carousel" data-interval="fa

我想用每张幻灯片作为问题,而不是普通的旋转木马。 在每张幻灯片/问题下方,您需要选择回答

视觉效果:我让它工作:

demo

我正在使用引导+转盘滑动选项。 不确定旋转木马是否是实现此目的的正确选项。 但我需要保存每张幻灯片/问题的每个答案

有没有正确的方法

                      <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>

如果是我,我就不必把它看作是我必须使用“旋转木马”的东西。。。。这主要是一种测验类型的情况,因此您有:

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。要循环和显示每个问题,请使用split将答案选项显示为问题下方的LI项,并将单击项的索引(位置)与qCorrectAnswer值进行比较(该值旨在根据|字符分割后对应正确答案的位置)

在他们的选择结果显示出来后,我会存储他们的答案(我可能会使用cookie而不是本地存储(主要是因为我最近有一个恐怖故事试图在应用程序中使用本地存储,只是我缺乏知识,我愿意打赌))。几秒钟后,将当前显示的问答选项替换为JSON数组中的下一个选项集。在显示下一个选项之前,我将检查是否已达到最后一个问题,如果已达到,则我将打破循环并显示一些最终UI元素/信息

因此,强迫它成为旋转木马可能会使它更难实现,我在脑海中构思它的方式(注意,我可能与您使用旋转木马概念的推理不一致)实现起来相对简单,使用您自己的jQuery会给您带来更大的灵活性。祝您好运


更新:这里有一个粗糙(未完成)的小提琴示例,说明我可能如何处理它…非常粗糙和未完成。[

很抱歉反应太晚。 谢谢你的回答-虽然它有点不同,我认为这也可以为我工作-非常感谢提供这个

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"}
];