<audio src="https://s3.amazonaws.com/duolingo-data/s3/sounds/wrong_answer.mp3"  preload="auto" hidden="true" id="danger-sound"></audio>
    <audio src="https://s3.amazonaws.com/duolingo-data/s3/sounds/right_answer.mp3"  preload="auto" hidden="true" id="success-sound"></audio>
  

.questContainer {
    /*max-width: 700px;*/
    width: 100%;
    margin: 0 auto;
    padding: 10px 20px;
    border: 5px solid #1ABC9C;
    border-radius:5px;
    background: #EFF3F6;
      -webkit-box-shadow: 0 1px 2px rgba(0, 0, 0, .2);
    -moz-box-shadow: 0 1px 2px rgba(0, 0, 0, .2);
    box-shadow: 0 1px 2px rgba(0, 0, 0, .2);
}

label {
    margin: 2px 0;
    width: 100%;
    background: #FFFFFF;
    padding: 8px 6px;
    border-radius: 5px 8px 8px 5px;
    line-height: 20px;
    font-weight: 500;
    vertical-align: middle;
    -webkit-box-shadow: 0 1px 2px rgba(0, 0, 0, .2);
    -moz-box-shadow: 0 1px 2px rgba(0, 0, 0, .2);
    box-shadow: 0 1px 2px rgba(0, 0, 0, .2);
}

label span {
    color: #FDFDFD;
    font-size: 20px;
    top: -1px !important;
}

.glyphicon {
    margin: 0 10px;
    vertical-align: middle;
}
.next .glyphicon{
  margin: 0 0 0 10px;
}
label div {
    margin-right: 5px !important;
}

.interact {
    padding: 4px 14px;
}
.interact .alert{
  margin-bottom: 0;
  margin-top: 35px;
}
.interact .navbuttons, .interact .check {
    margin-top: 60px;
}

.quest {
    margin: 30px 0 10px;
}

.danger {
    color: #a94442;
    background: #f2838f;
    border: 1px solid #ed5565;
}

.success {
    color: #3c763d;
    background: /*#66B82F/*#66B82F*/
    #b9df90;
    border: 1px solid #a0d468;
}

.warning {
    color: #8a6d3b;
    background: #ffdd87;
    border: 1px solid #ffce54;
}

.feedback {
  padding:15px 0 0 15px;
}
.feedback span{
  font-style: italic;
}

.hideit {
    display: none;
}
$(function() {
    //define some global variables
    var answers = {},
        currentId,
        currentAnswer,
        checks = [],
        actualAnswers = "",
        feed,
        curCont,
        progressWidth = 0,
        score = 0,
        firstAtempt = true,
        quiz = [{
                "id": "first",
                "question": "choose the fruits among the folowing :",
                "options": {
                    "a": "cherry",
                    "b": "apple",
                    "c": "cucumber",
                    "d": "banana"
                },
                "answers": ["a", "b", "d"],
                "wrongs": {
                    "c": "cucumber is not a fruit, it's a vegetable"
                }
            },
            {
                "id": "second",
                "question": "which of these is an insect ?",
                "options": {
                    "a": "fly",
                    "b": "butterfly",
                    "c": "bee",
                    "d": "flower",
                    "e": "sheep"
                },
                "answers": ["a", "b", "c"],
                "wrongs": {
                    "d": "flower is plant",
                    "e": "come on ! how can an animal with four legs be an insect !"
                },
            },
            {
                "id": "third",
                "question": "parmis ces pays lesquels apprtiennent à l'europe ?",
                "options": {
                    "a": "espagne",
                    "b": "suède",
                    "c": "togo",
                    "d": "allemagne"
                },
                "answers": ["a", "b", "d"],
                "wrongs": {
                    "c": "le togo est un pays africain"
                }
            },
            {
                "id": "fourth",
                "question": "which of these are MOOCs platforms :",
                "options": {
                    "a": "edx",
                    "b": "Coursera",
                    "c": "harvardx",
                    "d": "tinder",
                    "e": "udacity"
                },
                "answers": ["a", "b", "c", "e"],
                "wrongs": {
                    "d": "tinder is a dating social network"
                }
            },
            {
                "id": "fifth",
                "question": "which of these are social media ?",
                "options": {
                    "a": "facebook",
                    "b": "google+",
                    "c": "snapchat",
                    "d": "fmpc"
                },
                "answers": ["a", "b", "c"],
                "wrongs": {
                    "d": "you must be kidding me or I should update my social media list"
                }
            },
            {
                    "id": "sixth",
                    "question": "la fondation de la fmpc a eu lieu en :",
                    "options": {
                        "a": "1954",
                        "b": "1943",
                        "c": "1975",
                        "d": "1912"
                    },
                    "answers": ["c"],
                    "wrongs": {}
                }

        ];

    function roundit(x) {
        var temp = Math.round(x * 100) / 100;
        return temp;
    }
    //initialise the quiz and prepareAnswers
    makequiz();
    //animate the progress-bar the equivalent of 1 questContainer
    var width = roundit(1 / quiz.length * 100) + "%";
    $('.container-fluid').eq(0).find('.progress-bar').html(width).animate({
        "width": roundit(1 / quiz.length * 100) + "%"
    }, 300, "linear");
    //house keeping
    $("input[type=checkbox]").iCheck('uncheck');

    prepareAnswers();
    //hook event listeners
    $('.check').click(function(ev) {
        curCont = $(this).parents('.questContainer');
        feed = curCont.find('.feedback');
        currentId = curCont.attr("id");
        currentAnswer = answers[currentId].sort();
        actualAnswers = curCont.find('input[type=checkbox]:checked');

        getAnswer();
        checkAnswer();
    });

    $('.why').click(function() {
        curCont = $(this).parents('.questContainer');
        index = $(curCont).attr("questindex");
        feed = curCont.find('.feedback');
        showWhy();
    });

    $('.next').click(function() {
        var questNum = parseInt($(this).parents('.questContainer').attr('questindex')) + 1,
            progressbar = $(this).parents('.container-fluid').find('.progress-bar'),
            nextprog = $(this).parents('.container-fluid').next().find('.progress-bar');
        $(this).parents('.container-fluid').fadeOut(300, function() {
            $(this).next('.container-fluid').fadeIn(300, function() {
                var width = roundit((questNum + 1) / quiz.length) * 100 + "%";
                console.log(width);
                nextprog.html(width).animate({
                    "width": width
                }, 300, "linear");
            });
        });
    });

    $('.prev').click(function() {

        var questNum = parseInt($(this).parents('.questContainer').attr('questindex')),
            progressbar = $(this).parents('.container-fluid').find('.progress-bar'),
            prevprog = $(this).parents('.container-fluid').prev().find('.progress-bar');
        $(this).parents('.container-fluid').fadeOut(300, function() {
            $(this).prev('.container-fluid').fadeIn(300, function() {
                var width = roundit((questNum) / quiz.length) * 100 + "%";
                console.log(width);
                prevprog.html(width).animate({
                    "width": width
                }, 300, "linear");
            });
        });
    });
    $('.redo').click(function() {
        $(this).parents('.questContainer').find('input').iCheck('uncheck');
        $(this).parents('alert-danger').slideUp(120);
        $(this).parents('.container-fluid').find('.check').slideDown(120);
    });
    $('.finish').click(function() {
        alert("You had " + score + " correct questions out of " + quiz.length);
    });

    $('input[type=checkbox]').on('ifChanged', function() {
        $(feed).hide();
        $(this).parents('.container-fluid').find('.alert-danger').hide();
        $(this).parents('.container-fluid').find('.navbuttons').slideUp(200);
        $(this).parents('.container-fluid').find('.check').slideDown(200);
    });
    //functionality functions


    function getAnswer() {
        checks = [];
        for (var i = 0, y; i < actualAnswers.length; i++) {
            y = actualAnswers[i].value;
            checks.push(y);
        }
        console.log("checks : ", checks);
    }

    function checkAnswer() {
        var counter = 0;
        checks = checks.sort();
        currentAnswer = currentAnswer.sort();
        if (!checks.length) {
            feed.show().html("<span>please select an option at least</span>");
            return;
        }
        if (!(checks.length == currentAnswer.length)) {
            badAnswer();
            return;
        }
        for (var i = 0; i < checks.length; i++) {
            if (checks[i] == currentAnswer[i]) counter++;
        }
        counter == currentAnswer.length ? goodAnswer() : badAnswer();
        curCont.attr("firstAtempt", false);
    }
    //feedback
    function goodAnswer() {
        $(curCont).parents('.container-fluid').find('.check').addClass('hide');
        $(curCont).parents('.container-fluid').find('.alert-success').fadeIn(120);
        $(curCont).find('input[type=checkbox]').on('ifToggled', function() {
            $(this).iCheck('toggle');
        });
        $('#success-sound')[0].play();
        actualAnswers = '';
        var curAtempt = JSON.parse(curCont.attr("firstAtempt"));
        if (curAtempt) score++;
    }

    function badAnswer() {
        $(curCont).parents('.container-fluid').find('.check').hide();
        $(curCont).parents('.container-fluid').find('.alert-danger').fadeIn(120);
        curCont.attr("firstAtempt", false);
        $('#danger-sound')[0].play();
    }

    function showWhy() {

        var wrongs = quiz[index].wrongs;
        $.each(currentAnswer, function(key) {
            curCont.find('input[value=' + currentAnswer[key] + ']:checked').parents('label').addClass("success").find('div').after("<span class='glyphicon glyphicon-ok-sign' ></span>");
            curCont.find('input[value=' + currentAnswer[key] + ']:not(:checked)').parents('label').addClass("warning").find('div').after("<span class='glyphicon glyphicon-exclamation-sign' ></span>");
        });
        curCont.find('label').not('.success,.warning').has('input[type=checkbox]:checked').addClass("danger").find('div').after("<span class='glyphicon glyphicon-remove-sign' ></span>");
        $(curCont).parents('.container-fluid').find('.alert-danger').slideUp(120);
        $(curCont).parents('.container-fluid').find('.navbuttons').slideDown(120);
        feed.empty();
        for (var el in wrongs) feed.append(el + " : " + wrongs[el] + "<br>");
        feed.fadeIn(120);
        $(curCont).find('input[type=checkbox]').on('ifToggled', function() {
            $(this).iCheck('toggle');
        });

    }

    //quiz builder
    function makequiz() {
        quiz.forEach(function(ques, i) {
            var isfirst, question = "",
                feedbuttons, nextbutton, prevbutton,
                questionIndex = quiz.indexOf(ques),
                questionNumber = questionIndex + 1;
            isfirst = (i === 0) ? "" : "hideit",
                nextClassAndValue = (i == quiz.length - 1) ? "finish'>finish" : "next'>next", //feedbuttons = "<button class='check hideit'>Check</button><button class='why hideit' questindex='" + questionIndex + "'>see why</button><p class='feedback'></p><span></span>";
                header = "<div class='container-fluid " + isfirst + "'><div class='row'><div class='col-xs-12 col-md-6 col-md-offset-3'><div class='row'><div class='questContainer' firstatempt='" + firstAtempt + "' id='" + ques.id + "' questindex='" + questionIndex + "'><ol class='breadcrumb'><li><a href='#'>Matiere</a></li><li><a href='#'>Annee</a></li><li class='active'>session</li></ol><div class='progress'><div class='progress-bar progress-bar-info' style='width: 0%;'>0%</div></div>",
                pager = "<div class='row'><div class='interact'><p class='feedback hideit'></p><div class='check hideit'><div class='col-xs-10 col-xs-offset-1 col-md-8 col-md-offset-2'><button type='button' class='btn btn-primary btn-block'>check</button></div></div><div class='navbuttons '><div class='col-xs-6'><button class='btn btn-info btn-block prev'><span class='glyphicon glyphicon-chevron-left'></span> previous</button></div><div class='col-xs-6 '><button class='btn btn-info btn-block " + nextClassAndValue + "<span class='glyphicon glyphicon-chevron-right'></span></button></div></div><div class='alert alert-success hideit'><h4><span class='glyphicon glyphicon-ok'></span> Correct !</h4><div class='row'><div class='col-xs-6 col-md-4'><button class='btn btn-info btn-block prev' href='#'><span class='glyphicon glyphicon-chevron-left'></span> previous</button></div><div class='col-xs-6  col-md-4 col-md-offset-4'><button class='btn btn-info btn-block " + nextClassAndValue + "<span class='glyphicon glyphicon-chevron-right'></span></button></div></div></div><div class='alert alert-danger hideit'><h4><span class='glyphicon glyphicon-remove'></span>Incorrect</h4><div class='row'><div class='col-xs-6 col-md-4'><button class='btn btn-danger btn-block why' href='#'>see why<span class='glyphicon glyphicon-question-sign'></span></button></div><div class='col-xs-6  col-md-4 col-md-offset-4'><button class='btn btn-primary btn-block redo' href='#'>redo<span class='glyphicon glyphicon-repeat'></span></button></div></div></div></div></div></div></div></div></div></div>";

            question = header + "<p class='quest'>" + questionNumber + ". " + ques.question + "</p>";
            for (var opt in ques.options) {
                var choices = "";
                choices += "<label><input type='checkbox'  value='" + opt + "'/>" + opt + "- " + ques.options[opt] + "</label>";
                question += choices;
            }
            //question += feedbuttons + prevbutton+nextbutton;
            question += pager;
            $('body').append(question);
        });
        $('.questContainer').eq(0).find('.navbuttons div').eq(0).remove();
        $('.questContainer').eq(0).find('.alert-success .col-xs-6').eq(0).remove();
        $('.questContainer').eq(0).find('.navbuttons div,.alert-success .col-xs-6').attr("class", "col-xs-10 col-xs-offset-1 col-md-8 col-md-offset-2");
    }
    //prepare answers
    function prepareAnswers() {
        quiz.forEach(function(el) {
            answers[el.id] = el.answers;
        });
    }
    $('input').iCheck({
        checkboxClass: 'icheckbox_flat-green',
        radioClass: 'iradio_flat-green'
    });
});

External CSS

  1. https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css
  2. https://cdnjs.cloudflare.com/ajax/libs/bootflat/2.0.4/css/bootflat.min.css
  3. https://cdnjs.cloudflare.com/ajax/libs/iCheck/1.0.2/skins/flat/green.css

External JavaScript

  1. https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js
  2. https://cdnjs.cloudflare.com/ajax/libs/iCheck/1.0.2/icheck.js