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");
let activeQuestion = 0;
let dragged;
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,
},
]
//
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
}
renderQuestion()
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) return;
e.target.appendChild(dragged)
}
body {
background-repeat: no-repeat;:
}
.quizSection {
display: grid;
grid-template-columns: repeat(3, 1fr);
}
.question,
.answerchoices > *{
height: 100px;
width: 100px;
border: 1px black solid;
}
.answerchoices > *{
margin-bottom: 15px;
}
<!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="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 class="start">Start quizz</div>
</div>
<script src="index.js" type="text/javascript"></script>
</body>
</html>
