This code ensures that the JavaScript logic runs after the HTML document has fully loaded. It introduces a result message element, displayed at the bottom of the page, and adds an event listener to the “CHECK” button. When the button is clicked, it checks if the order of dragged words matches the predefined order, and then updates the result message accordingly, indicating whether the word order is correct or not. However, the checkButton isn’t working, I’m not sure which part of my code is written incorrectly.
<!DOCTYPE html>
<html lang="en">
<head>
<!-- Meta tags for character set, viewport, and compatibility -->
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Duolingo exercise</title>
<!-- Link to import the 'Fredoka' font from Google Fonts -->
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Fredoka:wght@300;400;500;600;700&display=swap"
rel="stylesheet">
<!-- CSS styles for the document -->
<style>
/* Your CSS styles go here */
:root {
--grey-color: rgb(228, 228, 228);
--darker-grey-color: rgb(189, 189, 189);
--text-color: rgb(60, 60, 60);
--border-radius: 15px;
}
/* Styles for the body and overall layout */
body {
/* ... */
}
/* Styles for different sections and elements */
.wrapper {
/* ... */
}
/* ... Other styles ... */
/* Styles for the footer and buttons */
footer {
/* ... */
}
.skip_button,
.check_button {
/* ... */
}
/* ... More styles ... */
</style>
</head>
<body>
<!-- Main content of the page -->
<div class="wrapper">
<!-- Heading for the exercise -->
<h1>Write this in Japanese</h1>
<!-- Top container containing image and original text -->
<div class="top__container">
<div class="image_text__container">
<!-- Duo image -->
<img src="assets/duo.svg" alt="duo">
<!-- Original text in Chinese -->
<p id="original__text"></p>
</div>
<!-- Container for the destination (dragged) words -->
<div id="destination__container"></div>
</div>
<!-- Container for the source (original) words -->
<div id="origin__container"></div>
</div>
<!-- Footer with SKIP and CHECK buttons -->
<footer>
<div class="skip_button">SKIP</div>
<div class="check_button">CHECK</div>
</footer>
<!-- JavaScript code -->
<script>
// Array of exercises with Chinese, Japanese, and word list
const exercises = [
// Exercise 1
{
chinese: "我是一隻貓",
japanese: "私は猫です",
list: ["は", "で", "私", "す", "猫"],
},
// Exercise 2
{
chinese: "這是學校啊",
japanese: "これは学校ですね",
list: ["学", "こ", "は", "で", "ね", "校", "れ", "す"],
},
// Exercise 3
{
chinese: "是，是這樣",
japanese: "はい、そうですね",
list: ["は", "そ", "、", "で", "ね", "い", "う", "す"],
},
];
// Get references to HTML elements
const destinationContainer = document.getElementById("destination__container");
const originContainer = document.getElementById("origin__container");
const originalText = document.getElementById("original__text");
const words = document.getElementsByClassName("word");
// Get default position of the destination container
let destinationPosDefault = destinationContainer.getBoundingClientRect();
// Arrays to store word objects for destination and origin containers
let destinationArray = [];
const originArray = [];
// Randomly select an exercise
let exercise = exercises[Math.floor(Math.random() * exercises.length)];
let chineseSentence = exercise.chinese.split(" ");
let listOfWords = exercise.list;
// Create span elements for the Chinese sentence
for (let i = 0; i < chineseSentence.length; i++) {
const spanNode = document.createElement("span");
spanNode.textContent = chineseSentence[i];
originalText.appendChild(spanNode);
}
// Create word elements for the word list
for (let i = 0; i < listOfWords.length; i++) {
const wordNode = document.createElement("div");
wordNode.textContent = listOfWords[i];
wordNode.classList.add("word");
originContainer.appendChild(wordNode);
}
// Function to calculate the x position for the destination container cursor
function calibrateDestinationCursorPos(destinationArray) {
if (destinationArray.length === 0) {
return destinationPosDefault.x;
} else {
let sum = destinationPosDefault.x;
destinationArray.forEach((element) => {
sum += element.width + 20; // Add 20 pixels for the space between words
});
return sum;
}
}
// Function to create an object for the origin array
function createOriginArray(word) {
let wordPosition = word.getBoundingClientRect();
let newWordObject = Object.assign(wordPosition);
newWordObject.word = word.textContent;
newWordObject.location = "origin";
originArray.push(newWordObject);
}
// Iterate through each word in the origin container
for (let i = 0; i < words.length; i++) {
createOriginArray(words[i]);
// Add click event listener for each word to enable dragging
words[i].addEventListener("click", () => {
// Calculate animation travel distance
destinationStartPos = calibrateDestinationCursorPos(destinationArray);
let yTravel =
originArray[i].y -
(destinationPosDefault.y +
(destinationPosDefault.height - originArray[i].height) / 2);
let xTravel = (originArray[i].x > destinationStartPos) ?
-(originArray[i].x - destinationStartPos) :
destinationStartPos - originArray[i].x;
// Check word position and update arrays accordingly
if (originArray[i].location === "origin") {
originArray[i].location = "destination";
destinationArray.push(originArray[i]);
} else if (originArray[i].location === "destination") {
yTravel = 0;
xTravel = 0;
originArray[i].location = "origin";
let test = destinationArray.filter(
(wordObject) => wordObject.word !== originArray[i].word
);
destinationArray = test;
}
// Apply translation to simulate dragging
words[i].style.transform = `translate(${xTravel}px,-${yTravel}px)`;
});
}
// Get references to check and reset buttons, and result message
const checkButton = document.getElementById("check__button");
const resultMessage = document.getElementById("result__message");
const resetButton = document.getElementById("reset__button");
// Add event listener to check button for result check
checkButton.addEventListener("click", () => {
let isCorrect = true;
// Check if the order of dragged words matches the exercise list
for (let i = 0; i < destinationArray.length; i++) {
console.log("Checking:", destinationArray[i].word, exercise.list[i]);
if (destinationArray[i].word !== exercise.list[i]) {
isCorrect = false;
break;
}
}
// Display result message
console.log("Result:", isCorrect ? "Correct!" : "Incorrect!");
resultMessage.textContent = isCorrect ? "Correct!" : "Incorrect!";
resultMessage.style.color = isCorrect ? "green" : "red";
});
// Add event listener to reset button for exercise reset
resetButton.addEventListener("click", () => {
// Reset arrays and word positions
destinationArray = [];
originArray.forEach((wordObject) => {
wordObject.location = "origin";
words.forEach((word) => (word.style.transform = "translate(0, 0)"));
});
// Select a new random exercise
exercise = exercises[Math.floor(Math.random() * exercises.length)];
chineseSentence = exercise.chinese.split(" ");
listOfWords = exercise.list;
// Clear result message
resultMessage.textContent = "";
});
</script>
</body>
</html>