family
@@ -0,0 +1,158 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+ <meta charset="UTF-8">
+ <meta name="viewport" content="width=device-width, initial-scale=1.0">
+ <title>Family Theme</title>
+ <style>
+ body {
+ background-image: url('background.jpg');
+ background-size: cover;
+ background-position: center;
+ font-family: Arial, sans-serif;
+ color: #fff;
+ text-align: left;
+ margin: 0;
+ padding: 20px;
+ }
+ img {
+ width: 150px;
+ height: auto;
+ display: block;
+ margin-bottom: 20px;
+ }
+ .sentence {
+ cursor: pointer;
+ padding: 10px;
+ border-radius: 5px;
+ transition: background-color 0.3s;
+ background-color: rgba(255, 255, 255, 0.8);
+ color: black;
+ margin: 5px 0;
+ width: 200px;
+ display: inline-block;
+ }
+ #correct-answer {
+ position: absolute;
+ top: 20px;
+ right: 20px;
+ background-color: rgba(255, 255, 255, 0.8);
+ padding: 10px;
+ border-radius: 5px;
+ color: black;
+ max-width: 200px;
+ }
+ </style>
+</head>
+<body>
+ <h1>Family Theme</h1>
+ <img src="family.jpg" alt="Family Image">
+
+ <div id="sentence-container">
+ <ul id="sentence-list"></ul>
+ </div>
+
+ <div id="correct-answer"></div>
+
+ <script>
+ let correctSentences = [];
+ let sentencesCount = 0;
+
+ const sentences = [
+ [
+ { text: "Family is the foundation of society.", correct: true },
+ { text: "Family doesn’t matter in life.", correct: false },
+ { text: "Supporting each other is important.", correct: true },
+ { text: "Family arguments are always harmful.", correct: false },
+ { text: "Every family has its unique dynamics.", correct: true },
+ { text: "Families should not share responsibilities.", correct: false },
+ { text: "Love is a key element in a family.", correct: true },
+ { text: "Only parents are important in a family.", correct: false },
+ { text: "Families grow and evolve over time.", correct: true },
+ { text: "Disagreements are a sign of a bad family.", correct: false }
+ ],
+ [
+ { text: "Family gatherings strengthen bonds.", correct: true },
+ { text: "Family is just a word.", correct: false },
+ { text: "Communication is essential in families.", correct: true },
+ { text: "You should always hide your feelings from family.", correct: false },
+ { text: "Every family has its challenges.", correct: true },
+ { text: "Family members should compete with each other.", correct: false },
+ { text: "Support from family can help during tough times.", correct: true },
+ { text: "Family is just about blood relations.", correct: false },
+ { text: "Family traditions create lasting memories.", correct: true },
+ { text: "Ignoring family issues helps resolve them.", correct: false }
+ ],
+ [
+ { text: "Respect is crucial in family relationships.", correct: true },
+ { text: "Family always comes first.", correct: false },
+ { text: "Families can be a source of strength.", correct: true },
+ { text: "Every family should be perfect.", correct: false },
+ { text: "Sharing joy with family enhances happiness.", correct: true },
+ { text: "Families can never agree on anything.", correct: false },
+ { text: "Laughter is important in family life.", correct: true },
+ { text: "Only children can have fun in a family.", correct: false },
+ { text: "Family members should always support each other.", correct: true },
+ { text: "Family life is boring.", correct: false }
+ ]
+ ];
+
+ function loadSentences() {
+ const sentenceList = document.getElementById("sentence-list");
+ sentenceList.innerHTML = "";
+ const currentSentences = sentences[sentencesCount];
+ currentSentences.forEach((sentence) => {
+ const li = document.createElement("li");
+ li.className = "sentence";
+ li.onclick = function() { checkAnswer(this, sentence.correct); };
+ li.innerText = sentence.text;
+ sentenceList.appendChild(li);
+ });
+ }
+
+ function checkAnswer(element, isCorrect) {
+ const sentenceText = element.innerText;
+ if (isCorrect) {
+ if (!correctSentences.includes(sentenceText)) {
+ correctSentences.push(sentenceText);
+ element.style.backgroundColor = "green";
+ updateDisplay();
+ }
+ } else {
+ element.style.backgroundColor = "red";
+ setTimeout(() => {
+ element.style.backgroundColor = "";
+ }, 1000);
+ }
+ }
+
+ function updateDisplay() {
+ const storyContainer = document.getElementById("correct-answer");
+ storyContainer.innerHTML = "";
+ correctSentences.forEach((sentence, index) => {
+ storyContainer.innerHTML += `<p>${index + 1}. ${sentence}</p>`;
+ });
+
+ if (correctSentences.length === 5) {
+ sentencesCount++;
+ if (sentencesCount < 3) {
+ loadSentences();
+ } else {
+ showFinalList();
+ }
+ }
+ }
+
+ function showFinalList() {
+ const storyContainer = document.getElementById("correct-answer");
+ storyContainer.innerHTML += `<p>All sentences chosen! Total Correct: ${correctSentences.length}</p>`;
+ const finalListLink = document.createElement("a");
+ finalListLink.href = "final.html"; // Link to final page
+ finalListLink.innerText = "View Final List of Correct Sentences";
+ storyContainer.appendChild(finalListLink);
+ }
+
+ loadSentences(); // Initial load of sentences
+ </script>
+</body>
+</html>