How to make and use a template in HTML without a framework

Question

If I was going to make a quiz, in which all of the questions needed to have the same format, and the user has to only be shown 1 question at a time, how would I do this without copying and pasting the code? Could I make a template? That would be my prefered option.

Thank you in advance.

Juan González Salinas · Accepted Answer · 2018-03-10T16:52:48.000

1

If you just want to show one question at a time, you could get the question's text element and the choices with JavaScript and change them by the following question.

You can also generate a template via JavaScript or another HTML file that gets copied whenever is needed with document.write() or innerHTML.

A small example of how it could be done:

var questions = ["2 + 2", "1 + 3", "8 / 2", "5 - 2"];
var currentQuestion = 0;
var answers = [];

function nextQuestion() {
  //Store answers:
  var value = $("input[name=options]:checked").val();
  answers.push(value);
  console.log(answers);


  //Next question:
  currentQuestion++;
  document.getElementById("question").innerHTML = questions[currentQuestion];

}

/* Apply your styles*/

#question {
  color: red;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="question">2 + 2?</div>
<form action="">
  <input type="radio" name="options" value="5">5<br>
  <input type="radio" name="options" value="4">4<br>
  <input type="radio" name="options" value="3">3
</form>

<button onclick="nextQuestion()">next question</button>

https://jsfiddle.net/z0n4xekh/23/

edited Mar 10 '18 at 16:52

answered Mar 10 '18 at 16:15

Juan González Salinas

81
7

How do I do that? – Benjamin Sommer Mar 10 '18 at 16:19
1 sec. I write an example. – Juan González Salinas Mar 10 '18 at 16:20
You can elaborate it further and adapt it to your needs. – Juan González Salinas Mar 10 '18 at 16:54
what does answers.push do? Does it just add value to the array? – Benjamin Sommer Mar 10 '18 at 16:57
Adds a new element to the array, in this case is appending the selected value. In the console you can see how the array stores the selected options. – Juan González Salinas Mar 10 '18 at 16:58
Let us [continue this discussion in chat](https://chat.stackoverflow.com/rooms/166594/discussion-between-marmadukeandbob-and-juan-gonzalez-salinas). – Benjamin Sommer Mar 10 '18 at 16:59

How to make and use a template in HTML without a framework

1 Answers1