Once a draggable element’s been dropped into a valid target i.e the user’s answered the question correctly s/he can move on to the next one. I’d like the next question to be positioned at the exact same place as the previous one. In order to do so I’ve created the newElement() function. But it’s not working as it should be. I’ve tried to use different methods such as insertBefore() but the console keep throwing message like: “Uncaught DOMException: Failed to execute ‘insertBefore’ on ‘Node’: The node before which the new node is to be inserted is not a child of this node”. appendChild() isn’t working either. I know it’s something to do with DOM manipulation but I haven’t the foggiest how to go about solving this issue. Help please.
const questionQuiz = document.querySelector(".question");
const answerChoices = document.querySelector(".answerchoices");
const allChoices = Array.from(document.querySelector(".answerchoices").children);
const choiceA = document.querySelector(".choiceA");
const choiceB = document.querySelector(".choiceB");
const choiceC = document.querySelector(".choiceC");
const start = document.querySelector(".start");
const quizSection = document.querySelector(".quizSection");
const choices = document.querySelectorAll(".choice");
const answerSection = document.querySelector(".answerSection");
const counter = document.querySelector(".counter");
const timerBar = document.querySelector(".timerBar");
const finalScore = document.querySelector(".finalScore");
const parent = document.querySelector(".parent");
console.log(quizSection)
let questions = [
{
question: "How many Grand Slam men's singles titles has he won?",
choiceA: 10,
choiceB: 15,
choiceC: 20,
questionImg: "url(images/federer.jpeg)",
correctAnswer: 20,
},
{
question: "How many Formula One World Championship has he won?",
choiceA: 5,
choiceB: 7,
choiceC: 10,
questionImg: "url(images/hamilton.jpeg)",
correctAnswer: 7,
},
{
question: "How many NBA title has Lebron won?",
choiceA: 6,
choiceB: 3,
choiceC: 4,
questionImg: "url(images/LeBron.png)",
correctAnswer: 4,
},
{
question: "How many Ballon D'or has the Argentinina won?",
choiceA: 5,
choiceB: 6,
choiceC: 7,
questionImg: "url(images/LeBron.png)",
correctAnswer: 7,
},
]
let lastQuestion = questions.length - 1;
let activeQuestion = 0;
let count = 0;
let score = 0;
let x = 0;
let timeUp = 10;
let timerBarLength = 800;
let unitBar = timerBarLength / timeUp;
let dragged;
start.addEventListener("click", startQuiz)
function startQuiz() {
start.style.visibility = "hidden";
parent.style.visibility = "visible";
renderQuestion();
progressBar();
setInterval(timerBarFunction, 1000);
setInterval(counterFunction, 1000);
}
function timerBarFunction() {
if(count < timeUp) {
timerBar.style.width = `${count*unitBar}px`
count++;
} else {
count = 0;
}
}
function progressBar() {
for(var questionIndex = 0; questionIndex < questions.length; questionIndex++) {
answerSection.innerHTML += `<div class="progress-boxes" id=${questionIndex}></div>`
}
}
function counterFunction() {
if(x <= timeUp) {
counter.innerHTML = x;
x++;
} else {
x = 0;
nextQuestion();
wrongAnswer();
}
}
function renderQuestion() {
let q = questions[activeQuestion]
choiceA.innerHTML = q.choiceA;
choiceB.innerHTML = q.choiceB;
choiceC.innerHTML = q.choiceC;
questionQuiz.innerHTML = q.question;
// document.body.style.backgroundImage = q.questionImg
}
questionQuiz.addEventListener("drag", function(e) {
})
questionQuiz.addEventListener("dragstart", function(e) {
console.log("start");
dragged = e.target;
console.log(dragged.innerHTML)
});
questionQuiz.addEventListener("dragend", function() {
console.log('end')
});
allChoices.forEach((choice) => {
choice.addEventListener("dragover", dragOver)
});
allChoices.forEach(choice => {
choice.addEventListener("dragenter", dragEnter)
});
allChoices.forEach(choice => {
choice.addEventListener("dragleave", dragLeave)
});
allChoices.forEach(choice => {
choice.addEventListener("drop", drop)
})
function dragOver(e) {
e.preventDefault()
console.log("dragover")
}
function dragEnter(e) {
e.preventDefault();
console.log("dragenter");
}
function dragLeave() {
console.log("dragleave")
}
function drop(e) {
e.preventDefault()
if(parseInt(e.target.innerHTML) !== questions[activeQuestion].correctAnswer) {
wrongAnswer();
nextQuestion()
} else {
correctAnswer();
score++;
e.target.appendChild(dragged);
nextQuestion();
newElement();
}
}
function correctAnswer() {
document.getElementById(activeQuestion).style.backgroundColor = "green";
}
function wrongAnswer() {
document.getElementById(activeQuestion).style.backgroundColor = "red";
}
function nextQuestion() {
count = 0;
if(activeQuestion < lastQuestion) {
activeQuestion++
renderQuestion();
} else {
renderScore();
}
}
function renderScore() {
finalScore.innerHTML = score;
finalScore.style.visibility = "visible";
}
function newElement() {
let newDiv = document.createElement("div");
newDiv.setAttribute("class", "question");
newDiv.setAttribute("draggable", "true");
newDiv.innerHTML = questions[activeQuestion].question;
parent.appendChild(newDiv);
// document.body.insertBefore(newDiv, answerChoices.nextSibling);
}body {
background-repeat: no-repeat;:
}
.answerchoices > *{
margin-bottom: 15px;
}
.answerSection {
display: grid;
grid-template-columns: repeat(4, 1fr);
justify-items: center;
}
.start {
width: 100px;
height: 100px;
border: 1px solid black;
}
.finalScore {
visibility: hidden;
}
.quizSection {
display: grid;
grid-template-columns: repeat(3, 1fr);
}
.question,
.answerchoices > *{
height: 100px;
width: 100px;
border: 1px black solid;
}
.progress-boxes {
height: 30px;
width: 30px;
color: grey;
background-color: grey;
margin: 10px;
}
.timerBar {
height: 5px;
/* width: 800px; */
color: blue;
background-color: purple;
border: 1px black solid;
}
.parent {
visibility: hidden;
}<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<link rel="stylesheet" href="index.css">
<title>Drag And Drop</title>
</head>
<body>
<div class="parent">
<div class="quizSection">
<div class="question" draggable="true"></div>
<div class=answerchoices>
<div class="choiceA">choiceA</div>
<div class="choiceB">choiceB</div>
<div class="choiceC">choiceC</div>
</div>
</div>
<div class="answerSection"></div>
<div class="counter"></div>
<div class="timerBar"></div>
<div class="finalScore"></div>
</div>
<div class="start">Cick here to start quizz</div>
<script src="index.js" type="text/javascript"></script>
</body>
</html>
