JSFiddle - React, Tailwind, and code Playground

by jam crowe

HTML

<div class="ques" id="question0">
    <div class="ques_number"><p>Q1</p></div>
    <div class="q_list">
        <div class="option" value="four" name="question0" id="q1a">
            <button class="answerOne">
                <p>Creative</p>
            </button>
        </div>
    </div>
</div>

<div class="ques" id="question1">
    <div class="ques_number"><p>Q2</p></div>
    <div class="q_list">
        <div class="option" value="four" name="question1" id="q2a">
            <button class="answerOne">      
              Answer Two
            </button>
        </div>
    </div>
</div>

<div class="ques" id="question2">
    <div class="ques_number"><p>Q3</p></div>
    <div class="q_list">
        <div class="option" value="four" name="question2" id="q3a">
            <button class="answerOne">
                Answer Three
            </button>
        </div>
    </div>
</div>

JavaScript

// Answers to each question add these values to finalResult
var value = {
    'question0'   : { one: 1, two: 2, three: 3, four: 4 },
    'question1'   : { one: 1, two: 2, three: 3, four: 4 },
    'question2'   : { one: 1, two: 2, three: 3, four: 4 }
};

// The next question to present after each response
var END = null;
var nextQuestion = {
'question0'   : { one: 'question1',   two: 'question1',  three: 'question1', four: 'question1',  },
    'question1'   : { one: 'question2',   two: 'question2',  three: 'question2', four: 'question2',  },
    'question2'  : { one: END,   two: END,  three: END, four: END,  },
};

// Show just the first question
$('.ques').hide();
$('#question0').fadeIn();

var outcome = 0;

$('.option').click(function(){
    
    increment();
    
    var answer = $(this).attr('value');
    var question = $(this).attr('name');
    
    outcome += value[question][answer];
    
    $('#' + question).delay(500).fadeOut(function(){
        var questionNext = nextQuestion[question][answer];
        if (questionNext == END){
            var finalResult = 'result ' + outcome;
            alert("Values added together : " + finalResult);
        }
        else {
            $('#' + questionNext).delay(2000).fadeIn(1000);
        }
    });
    
});

var online = 0;
var creative = 0;
var technical = 0;
var analyst = 0;
var managerial = 0;

function  increment() {
    $('#q1a').click(function(){
        creative +=5;
        online ++;
        managerial ++;
        
    });
    $('#q2a').click(function(){
        creative +=5;
        online ++;
        managerial ++;
        
    });
    $('#q3a').click(function(){
        creative +=5;
        online ++;
        managerial ++;
        
    });
    $('#q4a').click(function(){
        creative +=5;
        online ++;
        managerial ++;
        
    });
 alert(creative);
}