JSFiddle - React, Tailwind, and code Playground

by stevenkaspar

HTML

<form name="f" onsubmit='process(event)'>
    <b>How satisfied are the employees with the current state of the business?</b><br>
    <b>(1 = Dissatisfied // 5 = Satisfied)</b><br>
    <label for="VD">
        <input type="radio" id="VD" name="a" value="1">
            <div>1</div>
    </label>
    <label for="D">
        <input type="radio" id="D" name="a" value="2">
            <div>2</div>
    </label>
    <label for="N">
        <input type="radio" id="N" name="a" value="3">
            <div>3</div>
    </label>
    <label for="S">
        <input type="radio" id="S" name="a" value="4">
            <div>4</div>
    </label>
    <label for="SS">
        <input type="radio" id="SS" name="a" value="5">
            <div>5</div>
    </label>
    <p>&nbsp;</p>
    <p>&nbsp;</p>
    <b>How have employees viewed past changes?</b><br>
    <b>(1 = Positively // 5 = Negatively)</b><br>
    <label for="VD1">
        <input type="radio" id="VD1" name="b" value="1">
            <div>1</div>
    </label>
    <label for="D1">
        <input type="radio" id="D1" name="b" value="2">
            <div>2</div>
    </label>
    <label for="N1">
        <input type="radio" id="N1" name="b" value="3">
            <div>3</div>
    </label>
    <label for="S1">
        <input type="radio" id="S1" name="b" value="4">
            <div>4</div>
    </label>
    <label for="SS1">
        <input type="radio" id="SS1" name="b" value="5">
            <div>5</div>
    </label>
    <p>&nbsp;</p>
    <p>&nbsp;</p>
        <b>Do you have any changes going on now besides this one?</b><br>
        <b>(1 = Very Few Underway // 5 = Everything is Changing!)</b><br>
    <label for="VD2">
        <input type="radio" id="VD2" name="c" value="1">
            <div>1</div>
    </label>
    <label for="D2">
        <input type="radio" id="D2" name="c" value="2">
            <div>2</div>
    </label>
    <label for="N2">
        <input type="radio" id="N2" name="c" value="3">
            <div>3</div>
   ...

CSS

label {
  display: inline-block;
}

JavaScript

function process(event){
  event.preventDefault();
	var form   = event.currentTarget;
	var inputs = form.querySelectorAll('input');
  var total = 0;
  for(var i = 0, l = inputs.length; i < l; i++){
  	if(inputs[i].checked){
    	total += parseInt(inputs[i].value);
    }
  }
  console.log(total);
  if(total > 31){
  	// window.location.href = 'change-quiz-B.html';
  }
  else {
  	// window.location.href = 'change-quiz-A.html';
  }
}