Javascript quiz not transitioning -


i trying make quiz display 1 question @ time , when answer it, move next question. have basic markup so

<div id="quizzie">     <div class="col-md-12 quiz-container current">         <div class="col-md-6">             <img src="../images/image.jpg">         </div>         <div class="col-md-6 extra">             <ul class="quiz-step step1">                 <li class="question">                     <div class="question-wrap">                         <h3 class="question-title">some question:</h3>                     </div>                 </li>                 <li class="quiz-answer low-value" data-quizindex="2" data-number="1">                     <div class="col-md-12 add-border add-spacing">                         <div class="answer-wrap">                             <p class="answer-text">this thing</p>                         </div>                     </div>                 </li>                 <li class="quiz-answer high-value" data-quizindex="4" data-number="1">                     <div class="col-md-12 add-border add-spacing">                         <div class="answer-wrap">                             <p class="answer-text">that thing</p>                         </div>                     </div>                 </li>             </ul>         </div>     </div>     <div class="col-md-12 quiz-container">         <div class="col-md-6">             <img src="../images/image.jpg">         </div>         <div class="col-md-6 extra">             <ul class="quiz-step step2">                 <li class="question">                     <div class="question-wrap">                         <h3 class="question-title">some question:</h3>                     </div>                 </li>                 <li class="quiz-answer low-value" data-quizindex="2" data-number="2">                     <div class="col-md-12 add-border add-spacing">                         <div class="answer-wrap">                             <p class="answer-text">this thing</p>                         </div>                     </div>                 </li>                 <li class="quiz-answer high-value" data-quizindex="4" data-number="2">                     <div class="col-md-12 add-border add-spacing">                         <div class="answer-wrap">                             <p class="answer-text">that thing</p>                         </div>                     </div>                 </li>             </ul>         </div>     </div> </div>

i make sure first question displayed, , next questions hidden

#quizzie .quiz-container {     display: none;     padding:0; } #quizzie .current {     display: block; }

now javascript code have @ moment so

var quizsteps = $('#quizzie .quiz-step');  quizsteps.each(function () {     var currentstep = $(this),         ansopts = currentstep.children('.quiz-answer');      ansopts.each(function () {          var eachopt = $(this);         eachopt[0].addeventlistener('click', check, false);         function check() {             var $this = $(this),                 value = $this.attr('data-quizindex'),                 answerscore = parseint(value);              if (currentstep.children('.active').length > 0) {                 var wasactive = currentstep.children('.active'),                     oldscorevalue = wasactive.attr('data-quizindex'),                     oldscore = parseint(oldscorevalue);                 currentstep.children('.active').removeclass('active');                 $this.addclass('active');              } else {                 $this.addclass('active');                 updatestep(currentstep);             }         }     }); });  function updatestep(currentstep) {     if(currentstep.hasclass('current')){         currentstep.removeclass('current');         currentstep.next().addclass('current');     } }

now seems set active class correctly, not set current class correctly means stuck on question one. how can moving onto next question?

thanks

you should switch current class on ".quiz-container" element not on ".quiz-step" element.

js fiddle


Comments

Post a Comment

Popular posts from this blog

1111. appearing after print sequence - php -

morning, i have code takes string of shoe sizes, explodes , puts in table. code works , info displayed correctly on page after table there few 1's after table. i'm confused this. so table looks (in columns of 3 on webpage) available in following sizes: 3 4 5 6 9 10 111 here's codes, purpose of example $x = 3|4|6|10|9 function get_sizes_pipe($x) { $counter = 0; $splits = explode("|",$x); asort($splits); $x = print "<table class='greentable'>"; $x .= print "<thead><tr><th scope='col' colspan='3' abbr='starter'>available in following sizes:</th></tr></thead><tbody><tr>"; foreach ($splits $split) { $entry = print "<td>".$split."</td>"; if($counter == 2){ $entry .= print "</tr><tr>"; $counter =0; } else { $counter++; ...
Read more

java - WARN : org.springframework.web.servlet.PageNotFound - No mapping found for HTTP request with URI [/board/] in DispatcherServlet with name 'appServlet' -

this question has answer here: why spring mvc respond 404 , report “no mapping found http request uri […] in dispatcherservlet”? 3 answers i trying making simple bbs i'm encountering following error, warn : org.springframework.web.servlet.pagenotfound - no mapping found http request uri [/board/] in dispatcherservlet name 'appservlet' i have tried solve error many times, have failed. how can solve error? here web.xml, controllerand , servlet-context. my web.xml <?xml version="1.0" encoding="utf-8"?> <web-app version="2.5" xmlns="http://java.sun.com/xml/ns/javaee" xmlns:xsi="http://www.w3.org/2001/xmlschema-instance" xsi:schemalocation="http://java.sun.com/xml/ns/javaee http://java.sun.com/xml/ns/javaee/web-app_2_5.xsd"> <filter> <filter-nam...
Read more

Ruby on Rails, ActiveRecord, Postgres, UTF-8 and ASCII-8BIT encodings -

weirdest error, who’s challenge try , me? spent hours yesterday on , it’s magic. can't believe happening , it's driving me crazy. btw, using: rails 4.2.3 ruby 2.2.3 pg 0.18 encoding.default_internal = encoding.default_external = utf-8 config.encoding = 'utf-8' it has postgres, activerecord , encodings! turns out we’ve been getting these errors whenever create new users on database special characters: encoding::undefinedconversionerror: "\xc3" ascii-8bit utf-8 \xc3 may vary depending on characters. weird part we’ve set since beginning utf-8. makes no sense , digged it, , used script: user.all.each |user| user.attributes.each |name, value| if value.is_a? string puts user.email + name.encoding.to_s + value.encoding.to_s end end end and output of 1 of users, users same: dr_lottahelp@blahblah.comutf-8utf-8 dr_lottahelp@blahblah.comutf-8ascii-8bit dr_lottahelp@blahblah.comutf-8ascii-8bit dr_lottahelp@blahblah.comutf-8asci...
Read more