JSFiddle - React, Tailwind, and code Playground

by Dhanck

HTML

<link href="https://fonts.googleapis.com/css?family=Montserrat&display=swap" rel="stylesheet">

<div class="question">
<div class="question-1">Sad or depressed mood</div>
  <div class="options">
    <span class="option">Not at all</span>
    <span class="option">Sometimes</span>
    <span class="option">Frequenly</span>
    <span class="option">Most of the time</span>
  </div>
</div>
<div class="question">
<div class="question-2">Feeling of guilt</div>
  <div class="options">
    <span class="option">Not at all</span>
    <span class="option">Sometimes</span>
    <span class="option">Frequenly</span>
    <span class="option">Most of the time</span>
  </div>
</div>
<div class="question">
<div class="question-3">Irritable mood</div>
  <div class="options">
    <span class="option">Not at all</span>
    <span class="option">Sometimes</span>
    <span class="option">Frequenly</span>
    <span class="option">Most of the time</span>
  </div>
</div>
<div class="question">
<div class="question-4">Less interest or pleasure in usual activities</div>
  <div class="options">
    <span class="option">Not at all</span>
    <span class="option">Sometimes</span>
    <span class="option">Frequenly</span>
    <span class="option">Most of the time</span>
  </div>
</div>
<div class="question">
<div class="question-5">Withdrawing from or avoiding people</div>
  <div class="options">
    <span class="option">Not at all</span>
    <span class="option">Sometimes</span>
    <span class="option">Frequenly</span>
    <span class="option">Most of the time</span>
  </div>
</div>
<div class="question">
<div class="question-6">Finding it harder than usual to do things</div>
  <div class="options">
    <span class="option">Not at all</span>
    <span class="option">Sometimes</span>
    <span class="option">Frequenly</span>
    <span class="option">Most of the time</span>
  </div>
</div>
<div class="question">
<div class="question-7">Seeing myself as worthless</div>
  <div class="options">
   ...

CSS

body{
  font-family: 'Montserrat', sans-serif;
}
.question div:first-child{
    text-align: center;
    font-size: 25px;
    padding: 35% 20%;
}
.options{
   display: flex;
    justify-content: space-around;
}
.option {
    background: #00c4ff;
    padding: 15px;
    border-radius: 30px;
    text-align: center;
    color: #fff;
    cursor: pointer;
}

JavaScript

$('.question').hide();
$('.question').first().show();


i = 1;
r = 0;
addi = [];


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

	if($(this).text() == 'Not at all'){
  	console.log('0 Value');
    r = r+0;
      addi.push(0);
  }
  else if($(this).text() == 'Sometimes'){
  	console.log('1 Value');
    r = r+1;
      addi.push(1);
  }
  else if($(this).text() == 'Frequenly'){
  	console.log('2 Value');
    r = r+2;
      addi.push(2);
  }
  else if($(this).text() == 'Most of the time'){
  	console.log('3 Value');
    r = r+3;
      addi.push(3);
  }
  console.log(i + ' question');
  console.log(r + ' result');
  console.log(addi);
    
  $('.question-'+ i).parent().hide();
  i = i + 1;
  $('.question-'+ i).parent().show();
  $('.result').text(r);
  
})