JSFiddle - React, Tailwind, and code Playground

HTML

<!DOCTYPE html>
<html>
  <head>
  <meta charset="UTF-8">
    <title>שאלון סטרופ</title>
    <script type="text/javascript" src="JS/jscharts.js"></script>
    <link rel="stylesheet" href="CSS/stroop.css">
  </head>
  <body>
  <div id="han-title">שאלון סטרופ</div>
<div id="han-Intro"><p id="han-text"><strong>שלום, שמנו שלי ואפיק, ובמסגרת תואר עלינו לבצע מחקר בנושא אפקט סטרופ. אבקשך למלא מספר פרטים אישיים בעמוד הבא לצורך המחקר.</strong></p>
<button onmousedown="form1()">המשך</button>
</div>
<div id="han-form">
<p id="please">אבקשך למלא מספר פרטים אישיים לצורך המחקר:</p>
  <div>גיל<input id="AGE" class="Field" type="text" name="AGE" value="" /></div><br>
  <div>מין<select id="sex" class="Field">
  <option value="Male">זכר</option>
  <option value="Female">נקבה</option>
  </select></div><br>
  <div>שפת אם<input id="MT" class="Field" type="text" name="MT" value="" /></div><br>
  <div><button onmousedown="validate()">המשך</button></div>
</div>

<div id="instructions"><h1>הוראות</h1>
    <p>בשאלון זה קיימות מספר שאלות שבכל שאלה תוצג מילה</p>
    <p>וארבע אפשרויות תשובה. המילים בשאלון יופיעו בצבעים שונים.</p>
    <p>לעיתים יש התאמת מילה (לדוגמא המילה <span style="color:blue;">כחול</span> כתובה בצבע כחול)</p>
    <p>ולעיתים אין התאמת מילה (לדוגמא המילה <span style="color:red;">כחול</span> כתובה בצבע אדום) </p>
    <p>על מנת לא לגרום להטיה של התוצאות, בסיום השאלון יינתן לך הסבר קצר על נושא המחקר.</p>
  <button onmousedown="Demo()">התחל בשאלון</button></div>

    <div id="startstop">
        <p id="timetext"></p> <br><span id="time">5</span><br>
       <!--<button onmousedown="Questions()">start</button>-->
    </div>
    <div id="content">
    </div>
    <div id="options">
      <p id="A" onmousedown="Record(this.id)"></p>
      <p id="B" onmousedown="Record(this.id)"></p>
      <p id="C" onmousedown="Record(this.id)"></p>
      <p id="D" onmousedown="Record(this.id)"></p>
    </div>
    <div id="chartcontainer">This is just a replacement in case Javascript is not available...

JavaScript

var COLORS = new Array(
  "red",
  "blue",
  "green",
  "yellow",
  "black",
  "pink",
  //"brown",
  "#FE642E",
  "purple",
  "gray"
);
// Text can be anything.
var TEXT = new Array(
  "אדום",
  "כחול",
  "ירוק",
  "צהוב",
  "שחור",
  "ורוד",
  //"חום",
  "כתום",
  "סגול",
  "אפור"
);

var info = new Array(["Name",""],["AGE",""],["Date",""],["Sex",""],["Education",""],
                      ["Mother Tougue",""],["Place",""]);
var formObj=document.getElementById('han-form');
var IntroObj=document.getElementById('han-Intro');
var InstructionsObj=document.getElementById('instructions');
var Start=document.getElementById('startstop');
var hanTitle=document.getElementById('han-title');
var hanIntro=document.getElementById('han-Intro');
var Content=document.getElementById('content');
var name=document.getElementById('names');
var opt=document.getElementById('options');
var maxCount

function form1 () {
  formObj.style.display='block';
  IntroObj.style.display='None';
  hanIntro.style.display='None';
  document.getElementById('AGE').value=info[1][1];
  document.getElementById('MT').value=info[5][1];
}

function trim(stringToTrim) {
  return stringToTrim.replace(/^\s+|\s+$/g,"");
}

function validate () {
  if(trim(document.getElementById('AGE').value)=="")
  { 
  alert("חובה למלא גיל");
  document.getElementById('AGE').focus();
  return false;
  }
  if(trim(document.getElementById('sex').value)=="")
  { 
  alert("Sex must be filled out!");
  document.getElementById('sex').focus();
  return false;
  }
  if(trim(document.getElementById('MT').value)=="")
  { 
  alert("חובה למלא שפת אם");
  document.getElementById('MT').focus();
  return false;
  }
 
  var d=new Date();
  info[1][1]=document.getElementById('AGE').value;
  info[2][1]=d.toDateString();
  info[3][1]=document.getElementById('sex').value;
  info[5][1]=document.getElementById('MT').value;
Instructions();
}

function Instructions () {
  IntroObj.style.display='None';
  hanIntro.style.display='None';
 ...