Coming off a long hiatus from web development and am working on a small project to get back into the swing of things. The idea is to build a quiz with different types of questions that have different inputs for each of those types. At the end I'd like to generate a JSON object of the entire quiz.
Right now, I'm having trouble thinking of how to not display the question forms until I click the "Add Question" button. Do I make the form itself a string variable and create the elements using JS that way or is there a better approach?
Also, how would I use the "Delete Question" buttons to delete the form it is contained within. Obviously, I'll have to change it to not use the same ID. Should I create an iterator variable and append that to the ID name?
Lastly, what's a good approach to looping through forms that may have different numbers/types of inputs. Should I use switch/case statements like I did before or is there a more generic approach?
Not looking for whole answers just trying to dust off the cobwebs and get the wheels turning again! Thanks!
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=0, shrink-to-fit=no">
<title>Quiz Generator</title>
<style>
.container { margin: 0 auto; width: 80%; }
</style>
</head>
<body>
<header>
<div class="container">
<h1>Quiz Generator</h1>
</div>
</header>
<main>
<div class="container">
<div id="quiz">
<form name="addQuestionForm" id="addQuestionForm">
<label for="type">Question Type:</label>
<select name="type" id="type">
<option value="A">Type A</option>
<option value="B">Tybe B</option>
<option value="C">Type C</option>
</select>
<button name="addBtn" id="addBtn">Add Question</button>
</form>
<form name="typeAForm" id="typeAForm">
<label for="title">Question Title:</label>
<input type="text" name="title" id="title">
<label for="inputA">Input A:</label>
<input type="text" name="inputA" id="inputA">
<button name="deleteBtn" id="deleteBtn">Delete Question</button>
</form>
<form name="typeBForm" id="typeBForm">
<label for="title">Question Title:</label>
<input type="text" name="title" id="title">
<label for="inputB">Input B:</label>
<input type="text" name="inputB" id="inputB">
<button name="deleteBtn" id="deleteBtn">Delete Question</button>
</form>
<form name="typeCForm" id="typeCForm">
<label for="title">Question Title:</label>
<input type="text" name="title" id="title">
<label for="inputC">Input C:</label>
<input type="text" name="inputC" id="inputC">
<button name="deleteBtn" id="deleteBtn">Delete Question</button>
</form>
</div>
<button name="generateBtn" id="generateBtn">Generate JSON</button>
</div>
</main>
<script>
'use strict';
(function () {
let quiz = document.getElementById("quiz");
let addBtn = document.getElementById("addBtn");
let deleteBtn = document.getElementById("deleteBtn");
let generateBtn = document.getElementById("geneateBtn");
addBtn.addEventListener("click", function(e) {
e.preventDefault();
let type = document.getElementById("type").value;
let typeAForm = document.getElementById("typeAForm");
let typeBForm = document.getElementById("typeBForm");
let typeCForm = document.getElementById("typeCForm");
let newQuestion = null;
switch(type) {
case "A":
newQuestion = typeAForm.cloneNode(true);
quiz.appendChild(newQuestion);
break;
case "B":
newQuestion = typeBForm.cloneNode(true);
quiz.appendChild(newQuestion);
break;
case "C":
newQuestion = typeCForm.cloneNode(true);
quiz.appendChild(newQuestion);
break;
}
});
deleteBtn.addEventListener("click", function(e) {
e.preventDefault();
// Delete parent node
});
generateBtn.addEventListener("click", function(e) {
e.preventDefault();
// Loop through questions and generate JSON object
});
})();
</script>
</body>
Aucun commentaire:
Enregistrer un commentaire