JSFiddle - React, Tailwind, and code Playground

by gurkavcu

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.0.0/knockout-min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout.mapping/2.3.2/knockout.mapping.min.js"></script>
   <div id ="questions" data-bind="with: current">

        <h1 id="title">Quiz rond het thema: Brazili&euml; - Sisal</h1>
                    <p class="question" data-bind="text: question"></p>
                    <div  class="answers" data-bind="foreach: answers">
                        <p data-bind="with: $data">
                            <input id="checkboxes"type="checkbox" data-bind="checked: $root.correctAnswers, value: answer"/>
                            <span class="answer" data-bind="text: answer"></span>
                        </p>
                    </div>
                    <p id="info" class = "answers" data-bind="text:ko.mapping.toJS($root.correctAnswers)"></p>
       <button id="img1" title="Volgende vraag" data-bind="click: $root.nextQuestion" style="font-weight:underline;"> Next </button>
        
   </div>

   <div id ="questionsAndAnswers">
        <div>
             <div  data-bind="foreach: previous">
                    <p class="question" data-bind="text: question"></p>
                    <div data-bind="foreach: selectedAnswers">
                    <span data-bind="text: $data"></span>
             </div>
             <div data-bind="foreach: answers">
                    <p data-bind="with: $data">
                        <input type="checkbox" data-bind="value: answer, checked: tf=='true'" disabled="true"/>
                        <span class="answer" data-bind="text: answer"> </span><span data-bind="checked: $parent.selectedAnswers"></span>
                    </p>
             </div>
        <div>
   </div>

JavaScript

// Example Data
var data = [{
    "id": 1,
    "question": "Q1",
    "answers": [{
        "answer": "Q1-A1",
        "tf": "false"},
    {
        "answer": "Q1-A2",
        "tf": "true"},
    {
        "answer": "Q1-A3",
        "tf": "false"}],
    "info": "Q1-Info"},
{
    "id": 2,
    "question": "Q2",
    "answers": [{
        "answer": "Q2-A1",
        "tf": "false"},
    {
        "answer": "Q2-A2",
        "tf": "false"},
    {
        "answer": "Q2-A3",
        "tf": "true"}],
    "info": "Q2-Info"},
{
    "id": 3,
    "question": "Q3",
    "answers": [{
        "answer": "Q3-A1",
        "tf": "true"},
    {
        "answer": "Q3-A2",
        "tf": "false"},
    {
        "answer": "Q3-A3",
        "tf": "false"}],
    "info": "Q3-Info"},
           ];


$(function() {     
    ko.applyBindings(new QuizViewModel());
});


function QuizViewModel() {

    var self = this;

    self.previous = ko.observableArray([]);
    self.questions = ko.observableArray([]);
    self.current = ko.observable();
    self.number = ko.observable(0);
    self.previousNumbers = ko.observableArray([]);
    self.selectedAnswers = ko.observableArray();
    self.correctAnswers = ko.observableArray([]);

    self.loadQuestions = function() {
       
        $('#questionsAndAnswers').fadeOut('fast');

        $.post("/echo/json/", {
            json: JSON.stringify(ko.mapping.toJS(data))
        }, function(data) {
            $.each(data, function(i, q) {
                self.questions.push(q); 
            });
        });
        self.getQuestion(0);
        $('#questions').fadeIn('fast');

    }
        
    self.getQuestion = function(number) {
        $.post("/echo/json/", {
            json: JSON.stringify(ko.mapping.toJS(data))
        }, function(data) {
            $.each(data, function(i, q) {
                if (number == i) {
                    self.current(q);
                    self.correctAnswers.remove(function(item){return true;});
               ...