I am trying to make a drag and drop quiz in javascript that is able to check the answers after they are dropped in and give feedback on the answer. So far I have made the drag and drop section but when trying to check answers I am running into problems. This is my code for the webpage:
<!DOCTYPE html>
<html>
<head>
<title>Drag n Drop DEMO</title>
</head>
<body>
<h3>Quiz!</h3>
<p>Possible Answers</p>
<ol ondragstart="dragStartHandler(event)" ondragend="dragEndHandler(event)">
<li draggable="true" data-value="geolocation">Geolocation</li>
<li draggable="true" data-value="canvas">Canvas</li>
<li draggable="true" data-value="web-worker">Web Workers</li>
<li draggable="true" data-value="appcache">AppCache</li>
<li draggable="true" data-value="drag-and-drop">Drag and Drop</li>
</ol>
<script>
var internalDNDType = 'text/x-example'; // set this to something specific to your site
function dragStartHandler(event) {
if (event.target instanceof HTMLLIElement) {
// use the element's data-value="" attribute as the value to be moving:
event.dataTransfer.setData(internalDNDType, event.target.dataset.value);
event.dataTransfer.effectAllowed = 'move'; // only allow moves
} else {
event.preventDefault(); // don't allow selection to be dragged
}
}
function dragEndHandler(event) {
if (event.dataTransfer.dropEffect == 'move') {
// remove the dragged element
event.target.parentNode.removeChild(event.target);
}
}
</script>
<p>Provides scripts with a resolution-dependent bitmap canvas, which can be used for rendering graphs, game graphics, art, or other visual images on the fly.</p>
<ul id="answer1" ondragenter="dragEnterHandler(event)" ondragover="dragOverHandler(event)"
ondrop="dropHandler(event)">
</ul>
<p>Move (an image or highlighted text) to another part of the screen using a mouse or similar device.</p>
<ul id="answer2" ondragenter="dragEnterHandler(event)" ondragover="dragOverHandler(event)"
ondrop="dropHandler(event)" style="margin-top: 0px;">
</ul>
<p>Allows a developer to specify which files the browser should cache and make available to offline users.</p>
<ul id="answer3" ondragenter="dragEnterHandler(event)" ondragover="dragOverHandler(event)"
ondrop="dropHandler(event)">
</ul>
<p>Provides web applications with access to geographical location data about the user’s device.</p>
<ul id="answer4" ondragenter="dragEnterHandler(event)" ondragover="dragOverHandler(event)"
ondrop="dropHandler(event)">
</ul>
<p>Allows JavaScript to execute scripts in the background.</p>
<ul id="answer5" ondragenter="dragEnterHandler(event)" ondragover="dragOverHandler(event)"
ondrop="dropHandler(event)">
</ul>
<script>
var internalDNDType = 'text/x-example'; // set this to something specific to your site
function dragEnterHandler(event) {
var items = event.dataTransfer.items;
for (var i = 0; i < items.length; ++i) {
var item = items[i];
if (item.kind == 'string' && item.type == internalDNDType) {
event.preventDefault();
return;
}
}
}
function dragOverHandler(event) {
event.dataTransfer.dropEffect = 'move';
event.preventDefault();
}
function dropHandler(event) {
var li = document.createElement('li');
var data = event.dataTransfer.getData(internalDNDType);
if (data == 'canvas') {
li.textContent = 'Canvas';
} else if (data == 'drag-and-drop') {
li.textContent = 'Drag and Drop';
} else if (data == 'appcache') {
li.textContent = 'AppCache';
} else if (data == 'geolocation') {
li.textContent = 'Geolocation';
} else if (data == 'web-worker') {
li.textContent = 'Web Workers';
}else {
li.textContent = 'Unknown Answer';
}
event.target.appendChild(li);
}
</script>
<h4>Check Answers Here!</h4>
<button type="button" onclick="checkAns()">Check Answers</button> <button onClick="window.location.reload();">Reset</button>
<br>
<div id="div1"></div>
<script>
function checkAns() {
var node1 = document.getElementById('answer1')
htmlContent = node1.innerHTML
textContent = node1.textContent;
var node2 = document.getElementById('answer2')
htmlContent = node2.innerHTML
textContent = node2.textContent;
var node3 = document.getElementById('answer3')
htmlContent = node3.innerHTML
textContent = node3.textContent;
var node4 = document.getElementById('answer4')
htmlContent = node4.innerHTML
textContent = node4.textContent;
var node5 = document.getElementById('answer5')
htmlContent = node5.innerHTML
textContent = node5.textContent;
var displayAnswer1 = document.createElement("p")
if (node1.textContent === 'Canvas') {
var textNode1 = document.createTextNode("Question 1 was correct.");
displayAnswer1.appendChild(textNode1);
var bindElement1 = document.getElementById("div1");
bindElement1.appendChild(displayAnswer1);
}
else {
var textNode1 = document.createTextNode("Question 1 was incorrect.");
displayAnswer1.appendChild(textNode1);
var bindElement1 = document.getElementById("div1");
bindElement1.appendChild(displayAnswer1);
}
}
</script>
</body>
</html>
I am able to get the textContent from the drag and drop section and even when I type alert(node1.textContent); I get the correct answer from the drag and drop. But in my if else statement whenever I press the button the if statements condition is never met. The condition I have in there currently is if (node1.textContent === 'Canvas') which is what it comes out to when I sat it as an alert instead of an if else. Any help would be much appreciated!
Aucun commentaire:
Enregistrer un commentaire