vendredi 1 janvier 2016

Targeting group of buttons in quiz, rather than all quiz questions on click

Goal

I have a quiz that has 25 questions, each question has 4 possible answers .quiz__response. When a button is clicked, I'm looking to do the following, but only on the answers related to that specific question, right now it is applying the following to all the questions.

When a button is clicked ...

  • addClass(".is--unclickable") to those four answers
  • .show() .fa-check if the answer is true, .fa-times if the answer is false
  • addClass(".is--true") to change background to green if the answer is correct and addClass(".is--false") to change background to red for the remaining three answers

JSFiddle: http://ift.tt/1mVxeAz

scripts.js

$(function(){

    /*-------------------------------------
    QUIZ
    --------------------------------------*/

    function showScoreBox() {
        var scrollDepth = $(window).scrollTop();
        var divPosition = $(".quiz__header").offset().top - 45;
        var windowWidth = $(window).width();
        // console.log(windowWidth);

        if (scrollDepth > divPosition && (windowWidth > 768)) {
            $(".quiz__score").show();
            $(".quiz__score--mobile").hide();
        } else {
            $(".quiz__score").hide();
            $(".quiz__score--mobile").show();
        }
    } showScoreBox();

    $(window).on("scroll", function(){
        showScoreBox();
    });

    $(window).on("resize", function(){
        showScoreBox();
    });

    var score = 0;

    $(".quiz__response").on("click", function(){
        $(".quiz__response").addClass("is--unclickable");
        $(".quiz__info").show("quiz__info");  // Show extra info
        console.log("Clicked");

        if ($(this).hasClass("answer--true")) {
            $(this).addClass("is--true");
            $(".fa-check").show();

            // Update score
            score++
            $(".quiz__correct").html(score);
            $(".quiz__correct--mobile").html(score);
        } else {
            $(this).addClass("is--false");
            $(".fa-times").show();
        }
    });

    /*-------------------------------------
    RESET
    --------------------------------------*/

    function resetQuiz() {
      $(".quiz__response").removeClass("answer--true answer--false");
      var score = 0
      $(".quiz__correct").html(score);
      $(".quiz__correct--mobile").html(score);
    }

    $(".button__reset").on("click", function(){
     resetQuiz();
    });

    /*-------------------------------------
    CONFETTI
    --------------------------------------*/

    function rainConfetti() {

        if (score === 25) {
            canvas.show()
        }
    }

    /*-------------------------------------
    SMOOTH SCROLL
    --------------------------------------*/

    $('a[href*=#]:not([href=#])').click(function() {
        if (location.pathname.replace(/^\//,'') == this.pathname.replace(/^\//,'') && location.hostname == this.hostname) {
            var target = $(this.hash);
            target = target.length ? target : $('[name=' + this.hash.slice(1) +']');
            if (target.length) {
                $('html,body').animate({
                    scrollTop: target.offset().top
                }, 1000);
                return false;
            }
        }
    });
});

index.html (Quiz snippet)

  <link rel="stylesheet" href="http://ift.tt/1PinXyn">

  <div class="quiz">
            <div class="quiz__score">
                <p><span class="quiz__correct">0</span> / 25</p>
            </div>

            <h2 class="quiz__header" id="top">Take the quiz</h2>
            <p class="credit">How well have you been paying attention to what's been happening in southwestern Manitoba in 2015? Take our 25-question quiz to test your local news knowledge.</p>

            <div class="quiz__questions">
            <!-- <canvas id="confetti"></canvas> -->
                <!-- Question -->
                <div class="quiz__question question-1 question__sports">
                    <div class="wrapper">
                        <!-- <img src="http://ift.tt/1vRdcHq" alt="" class="quiz__image"> -->
                    </div>
                    <h3>Question #1</h3>
                    <p class="quiz__description">What Brandon Wheat King, who was drafted by the New York Islanders, lost his desire to play hockey and walked away from the team prior to this season starting?</p>
                    <div class="quiz__responses">
                        <button class="quiz__response answer--false">Kale Clague <i class="fa fa-times"></i></button>
                        <button class="quiz__response answer--false">Macoy Erkamps <i class="fa fa-times"></i></button>
                        <button class="quiz__response answer--true">Ryan Pilon <i class="fa fa-check"></i></button>
                        <button class="quiz__response answer--false">Colin Cloutier <i class="fa fa-times"></i></button>


                        <!-- The six­-foot-­two, 212­pound rearguard had 11 goals and 41 assists in 68 regular­ season games, with a goal and 11 assists in 19 playoff contests last season, paired mainly with Russian Ivan Provorov. In 193 regular­season games with Brandon and the Lethbridge,Hurricanes, Pilon has 23 goals, 93 assists and 116 penalty minutes. -->

                    </div> <!-- .responses -->
                </div> <!-- .question -->

                <!-- Question -->
                <div class="quiz__question question-2 question__sports">
                    <div class="wrapper">
                        <!-- <img src="http://ift.tt/1vRdcHq" alt="" class="quiz__image"> -->
                    </div>
                    <h3>Question #2</h3>
                    <p class="quiz__description">Which former Brandon skip refused to talk to the local media after losing his fifth provincial men’s curling championship game in six years at Westman Place?</p>
                    <div class="quiz__responses">
                        <button class="quiz__response answer--false">Russ Howard <i class="fa fa-times"></i></button>
                        <button class="quiz__response answer--false">Kerry Burtnyk <i class="fa fa-times"></i></button>
                        <button class="quiz__response answer--true">Mike McEwen <i class="fa fa-check"></i></button>
                        <button class="quiz__response answer--false">Braden Calvert <i class="fa fa-times"></i></button>
                    </div> <!-- .responses -->
                </div> <!-- .question -->

                <!-- McEwen’s Winnipeg based team of B.J. Neufeld, Matt Wozniak and Denni Neufeld lost to Ried Carruthers 5­3 at the Safeway Championship hosted by Brandon. -->
        </div> <!-- quiz -->

Aucun commentaire:

Enregistrer un commentaire