question_bank

In this example below you will see how to do a question_bank with some HTML / CSS and Javascript

Thumbnail
This awesome code was written by sunpreet, you can see more from this user in the personal repository.
You can find the original code on Codepen.io
Copyright sunpreet ©
  • HTML
  • CSS
  • JavaScript
<!DOCTYPE html>
<html lang="en" >

<head>
  <meta charset="UTF-8">
  <title>question_bank</title>
  
  
  
      <link rel="stylesheet" href="css/style.css">

  
</head>

<body>

  <body onLoad="shaan()" style="background-color: darkcyan;">
<form method="post" name="form">
  <div align="center"><center><table border="1">
    <tr>
      <td colspan="2" bgcolor="green"><div align="center"><center><font size="+3"
      color="#FFFFFF">Self-Grading Quiz </font></td>
    </tr>
    <tr>
   
     <td bgcolor="green"><div align="left"><font size="+8" color="#FFFFFF">Quiz Timer: </font></td>
       <td colspan=2 bgcolor="green"><div align="center" id="countdown" name="countdown" style="font-size:20px;">Press Timer Button Then Start Quiz:</td>
    </tr>
    <tr>
      <td><b>Question&nbsp;#:</b></td>
      <td align="left"><input type="text" name="questNo" size="4"></td>
    </tr>
    <tr>
      <td><b>Question:</b></td>
      <td><div align="center"><center><p><textarea cols="70" rows="2" name="question" wrap="virtual"></textarea></td>
    </tr>
    <tr>
      <td align="right"><b>a)</b></td>
      <td><div align="center"><center><p><input type="text" name="choiceA" size="75"></td>
    </tr>
    <tr>
      <td align="right"><b>b)</b></td>
      <td><div align="center"><center><p><input type="text" name="choiceB" size="75"></td>
    </tr>
    <tr>
      <td align="right"><b>c)</b></td>
      <td><div align="center"><center><p><input type="text" name="choiceC" size="75"></td>
    </tr>
    <tr>
      <td align="right"><b>d)</b></td>
      <td><div align="center"><center><p><input type="text" name="choiceD" size="75"></td>
    </tr>
    <tr>
      <td align="right"><b>Your choice:</b></td>
      <td><input type="text" name="yourChoice" size="4"></td>
    </tr>
    <tr>
      <td colspan="2"><div align="center"><center><p><input type="button"
      value="Check Current Answer" onClick="checkAnswer(this.form)">
     <!--<input type="button" value="Start Quiz" onClick="Startquiz(this.form),time()">-->
        <input type="button"
      value="Start/Next" onClick="nextQuestion(this.form)"> <input type="reset"
      value="Start Over" onClick="clearForm(this.form)">
        <input type="button" value="Timer" onClick="time()"></td>
    </tr>
    <tr>
      <td align="right"><b>Results:</b></td>
      <td><div align="center"><center><p><textarea cols="70" rows="3" name="results" wrap="virtual"></textarea></td>
    </tr>
    <tr>
      <td align="right"><b>Current Score:</b></td>
      <td><b>Points:</b><input type="text" name="myScore" size="4">&nbsp;&nbsp;<b>Percentage:</b><input

      type="text" name="percent" size="6">&nbsp;&nbsp;<b>Letter Grade:</b><input type="text"
      name="grade" size="6"></td>
    </tr>
  </table>
  </center></div>
</form>
    </body>
  
  

    <script  src="js/index.js"></script>




</body>

</html>

/*Downloaded from https://www.codeseek.co/sunpreet/question_bank-VezEdR */
td
{
  color:black;
}
textarea
{
  background-color:aquamarine;
}
input
{
 background-color:aquamarine;
}

/*Downloaded from https://www.codeseek.co/sunpreet/question_bank-VezEdR */
var nm;
function shaan() 
              {
                     nm= prompt("Please click timer button then start quiz");
          questions = new Array()
          questions[1] = "What was the name of David's gigantic opponent?"
          questions[2] = "What was the name of the Sea that Moses parted?"
          questions[3] = "What did moses throw to the ground that became a serpent?"
          questions[4] = "How many times did Samson lie to Delilah before telling her the truth?"
          questions[5] = "Who invented the BALLPOINT PEN?"
          questions[6] = "Which scientist discovered the radioactive element radium?"
          questions[7] = "The first death anniversary day of Sri Rajiv Gandhi was observed as the?"
          questions[8] = "20th August is celebrated as?"
          questions[9] = "When is the World Population Day observed?"
          questions[10] = "January 15 is celebrated as the?"
          questions[11] = "The centenary of Mahatma Gandhi's arrival in South Africa was celebrated in?"
          questions[12] = "The United Nations declared 1993 as a year of the?"
          questions[13] = "The decade 1981-1990 was observed as International Decade for?"
          questions[14] = "Which year is observed as Poverty Eradication Year by SAARC?"
          questions[15] = "The year 1985 was declared as the International Year of?"
             
              console.log(questions + "<br/>");


              answerA = new Array()
              answerA[1] = "Solomon."
              answerA[2] = "Red."
              answerA[3] = "a crown made of thistles."
              answerA[4] = "once."
              answerA[5] = "Biro Brothers."
              answerA[6] = "Isaac Newton."
              answerA[7] = "National Integration Day"
              answerA[8] = "Earth Day"
              answerA[9] = "May 31"
              answerA[10] = "Republic Day"
              answerA[11] = "May 1993"
              answerA[12] = "disabled"
              answerA[13] = "Peace"
              answerA[14] = "1998"
              answerA[15] = "Blind"
              

              answerB = new Array()
              answerB[1] = "Joseph."
              answerB[2] = "Atlantic."
              answerB[3] = "a staff."
              answerB[4] = "twice."
              answerB[5] = "Waterman Brothers."
              answerB[6] = "Albert Einstein."
              answerB[7] = "Peace and Love Day"
              answerB[8] = "Sadbhavana Divas"
              answerB[9] = "October 4"
              answerB[10] = "Ugadhi"
              answerB[11] = "August 1993"
              answerB[12] = "forests"
              answerB[13] = "Drinking Water Supply and Sanitation"
              answerB[14] = "1997"
              answerB[15] = "Youth"

              answerC = new Array()
              answerC[1] = "Goliath."
              answerC[2] = "Baltic."
              answerC[3] = "a stone tablet."
              answerC[4] = "three times."
              answerC[5] = "Bicc Brothers."
              answerC[6] = "Benjamin Franklin."
              answerC[7] = "Secularism Day"
              answerC[8] = "No Tobacco Day"
              answerC[9] = "December 10"
              answerC[10] = "Teachers' Day"
              answerC[11] = "July 1993"
              answerC[12] = "girl child"
              answerC[13] = "Women"
              answerC[14] = "1996"
              answerC[15] = "Children"
              

              answerD = new Array()
              answerD[1] = "Job."
              answerD[2] = "Dead."
              answerD[3] = "a necklace made of beads."
              answerD[4] = "four times."
              answerD[5] = "Biro Brothers."
              answerD[6] = "Marie Curie."
              answerD[7] = "Anti-Terrorism Day"
              answerD[8] = "None of these"
              answerD[9] = "July 11"
              answerD[10] = "Army Day"
              answerD[11] = "September 1993"
              answerD[12] = "indigenous people"
              answerD[13] = "Children"
              answerD[14] = "1995"
              answerD[15] = "GandhiWomen"
              

              rightAns = new Array()
              rightAns[1] = "c"
              rightAns[2] = "a"
              rightAns[3] = "b"
              rightAns[4] = "c"
              rightAns[5] = "a"
              rightAns[6] = "d"
              rightAns[7] = "d"
              rightAns[8] = "b"
              rightAns[9] = "d"
              rightAns[10] = "d"
              rightAns[11] = "a"
              rightAns[12] = "d"
              rightAns[13] = "b"
              rightAns[14] = "d"
              rightAns[15] = "b"

            

              } 

function nextQuestion(form)

{   
  var quizEnd = eval(15 * 1);

    if(form.questNo.value == quizEnd) {

       form.question.value = "";

       form.choiceA.value = "";

       form.choiceB.value = "";

       form.choiceC.value = "";

       form.choiceD.value = "";

       form.yourChoice.value = "";

       form.results.value = "End of Quiz.  Your final results are listed below."; } else {

    if(form.questNo.value == "") {form.questNo.value = 1} else {
    
       form.questNo.value = eval(form.questNo.value) + 1;

    }

    form.question.value = questions[form.questNo.value];

    form.choiceA.value = answerA[form.questNo.value];

    form.choiceB.value = answerB[form.questNo.value];

    form.choiceC.value = answerC[form.questNo.value];

    form.choiceD.value = answerD[form.questNo.value];

    form.yourChoice.value = "";

    form.results.value = "";

    if(form.myScore.value == "") {form.myScore.value = 0; } else {
                                                  form.myScore.value = form.myScore.value; }

   }

}

   function checkAnswer(form) {
      
      var myScore = 0;
      var curve = 0;

      if(form.results.value != "") 
      {
        form.results.value = "Sorry, no guessing allowed.  In order to retry this question you will have to start the quiz over.  Click on ''Next Question'' to continue.";
      }

      else if(form.yourChoice.value == rightAns[form.questNo.value]) 
      {
      form.myScore.value = eval(form.myScore.value) + eval(1);
     form.results.value = "Conratulations!  You are correct. Your score is " + form.myScore.value + " out of a possible " + form.questNo.value ; 
      } 
     
     else
     {
      
      form.results.value = "Sorry, you are incorrect. This brings your cumulative score to " + form.myScore.value + " out of a possible " + form.questNo.value + "Click Next to Continue";}

   
   curve = form.myScore.value / form.questNo.value;

   form.percent.value = parseInt(curve * 100,10);
   
   if(curve > .90) {
     form.grade.value = "A";
   } else if(curve > .80) {
     form.grade.value = "B"; 
   } else if(curve > .70) 
   {
     form.grade.value = "C"; 
   } else if(curve > .60) 
   {form.grade.value = "D"; } 
     else {form.grade.value = "F"; }
    }


function clearForm(form)

{

    
    form.questNo.value = "";
    form.question.value = "";
    form.choiceA.value = "";
    form.choiceB.value = "";
    form.choiceC.value = "";
    form.choiceD.value = "";
    form.yourChoice.value = "";
    form.results.value = "";
    form.myScore.value = "";
    form.percent.value = "";
    form.grade.value = "";
    

}

function startTimer(duration, display) 
  {
    var timer = duration, minutes, seconds;
    setInterval(function ()
	{
        minutes = parseInt(timer / 60, 10);
        seconds = parseInt(timer % 60, 10);

        minutes = minutes < 10 ? "0" + minutes : minutes;
        seconds = seconds < 10 ? "0" + seconds : seconds;

        display.textContent = minutes + ":" + seconds;
	
        if (--timer < 0)
		{
         setInterval(update() ,  set)
        }
      if(seconds ==0){
        alert("time over");
      }
    }, 1000);
}

function time() {

     set = 60 * 1,
        display = document.getElementById("countdown");
    startTimer(set, display);

};
function update()
{
  clearInterval();
  clearTimeout();
  


}

Comments