JSFiddle - React, Tailwind, and code Playground

by Tom Randolph

HTML

<div id="bod" style="display:block; height:85%; width:90%; float:left; border-style:solid; border-radius:10px; padding:10px; background:#CEA; clear:left;">
        <form action="createExam.php">
            <input type="button" value="Save Exam" onclick="sub(this);" style="float:right;">
            <input type="text" id="ExamName" value="Exam Name" name="exam_name" onclick="">
            <input type="hidden" id="DOM" name="DOM" value="">
            <select id="type" name="type">
                    <option value="multiple">Multiple Choice</option>
                    <option value="fill-in">Fill In</option>
                    <option value="tf">True/False</option>
                    <option value="prog">Program (BETA)</option>
            </select>
            <input type="button" value="Add Question" onclick="addQuestion();">
            <div id="questionBox">

            </div>
        </form>
    </div>
    <div class="question-temp" id="multipleChoice-temp" hidden="true">
    <div class="multipleChoice" id="multipleChoice">
        <input type="button" value="X" onclick="del(this);" style="float:right;"/>
        <textarea id="questionText">Question Text</textarea><br/>
        <textarea id="option_correct">Correct Answer</textarea><br/>
        <textarea id="option_4">Option 4</textarea><br/>
        <textarea id="option_4">Option 3</textarea><br/>
        <textarea id="option_4">Option 4</textarea>
    </div>
    </div>
    <div class="question-temp" id="fill-in-temp" hidden="true">
    <div class="fill-in" id="fill-in">
        <input type="button" value="X" onclick="del(this);" style="float:right;"/>
        <input type="text" value="Question Text"/><br />
        <textarea id="output"></textarea>
    </div>
    </div>
    <div class="question-temp" id="tf-temp" hidden="true">
    <div class="tf" id="tf" >
        <input type="button" value="X" onclick="del(this);" style="float:right;">
        <input type="text" value="Question Text"><br />
       ...

JavaScript

questionCount = 0;
id = 0;
function addQuestion(){
        qType = document.getElementById('type').value;
        questionBox=document.getElementById('questionBox');
        if(qType == "multiple"){
            newNode = document.getElementById('multipleChoice-    temp').cloneNode(true);
            newNode.hidden=false;
            newNode.className='question';
            newNode.id = id;
            questionCount++;
            id++;
            questionBox.appendChild(newNode);
        }
        else if(qType == "fill-in"){
            newNode = document.getElementById('fill-in-temp').cloneNode(true);
            newNode.hidden=false;
            newNode.className='question';
            newNode.id = questionCount;
            questionCount++;
            id++;
            questionBox.appendChild(newNode);
        } 
        else if(qType == "tf"){
            newNode = document.getElementById('tf-temp').cloneNode(true);
            newNode.hidden=false;
            newNode.className='question';
            newNode.id = questionCount;
            questionCount++;
            id++;
            questionBox.appendChild(newNode);
        }
        else if(qType == "prog"){
            newNode = document.getElementById('prog-temp').cloneNode(true);
            newNode.hidden=false;
            newNode.className='question';
            newNode.id = questionCount;
            questionCount++;
            id++;
            questionBox.appendChild(newNode);
        }
}
function del(x){
    x.parentNode.parentNode.removeChild(x.parentNode);

}
function sub(x){
    questions = document.getElementsByClassName('question');
    for(q=0; q<questions.length; q++){
        alert(questions[q].innerHTML);
        for(var ch in questions[q].children) alert(ch.id) ;
        //questionArr.push({qStr:,ans:'',});
    }
    document.getElementById('DOM').innerHTML = document.getElementById('questionBox').innerHTML;
    x.parentNode.submit();
}