JSFiddle - React, Tailwind, and code Playground

by Ashenvale Poring

HTML

<div class='section' id='s1'>
    <div class='center' id='center1'>
        <p class='selected'>Aaaaa</p>
        <div class='question' id='q1'>
        </div>
        <div class='choices' id='choices1'>
            <p class='a'>Choice A</p>
            <p class='b'>Choice B</p>
            <p class='c'>Choice C</p>
            <p class='d'>Choice D</p>
        </div>

        <input type='submit' value='Submit' class='submit'>
        <p class='score'></p>
    </div>
</div>

JavaScript

$('.choices p').on('click', function() {      $(this).addClass('selected').siblings().removeClass("selected");
});

$('.submit').click(function() {
        var score = 0;
        var choice = $('.selected');
        if (choice.hasClass('a')) {
            score += 1;
        }
        else if (choice.hasClass('b')) {
            score += 2;
        }

        $(this).prev('.choices').find('p').off('click');
        $('.score').text('Score is ' + score);
 });