Projek TA

Welcome to Interactive Classroom

<!DOCTYPE html> <html> <head> <meta name="viewport" content="width=device-width, initial-scale=1"> <meta charset="utf-8"> <title>Projek TA</title> <style> body { background-image: url('https://cdna.artstation.com/p/assets/images/images/058/927/096/large/shiki-hayate-another-school-gate.jpg?1675261925'); background-size: cover; /* Untuk menyesuaikan ukuran gambar dengan jendela browser */ background-repeat: no-repeat; background-attachment: fixed; background-position: center; background-size: cover; margin: 0 !important; } .container { height: 90vh; display: flex; flex-direction: row; justify-content: center; align-items: flex-end; padding-bottom: 50px; flex-wrap: wrap; position: relative; } .wrapper { position: fixed; text-align: center; background: rgba(159, 135, 159, 0.8); height: 128px; width: 60%; border: 4px solid black; padding: 10px; flex-grow: 12; margin-bottom: 10px; border-radius: 20px; animation: animateText 2s infinite alternate; display: none; } .teks-utama { font-size: 100px; font-family: Arial, sans-serif; color: #333; text-align: center; } .teks-pilihan { font-size: 30px; font-family: Arial, sans-serif; color: #666; text-decoration: none; } .chars { position: fixed; margin-bottom: -70px; z-index: -1; position: relative width: 100%; height: 100%; } .char1, .char2, .char3 { width: fit-contet; position: absolute; bottom: 0; } .char1 { right: 20px; bottom: -20px; } .char2 { right: -130px; bottom: -13px; } .char3 { left: -10px; bottom: -26px; } .wrapper .text { overflow: hidden; white-space: nowrap; animation: typing 5s steps(30) infinite; } @keyframes typing { from { width: 0; /* Start with no text */ } to { width: 100%; /* Fully display the text */ } } .wrapper .text::after { content: "|"; animation: typing 3s steps(30) infinite; } .text { position: absolute; text-align: center; height: 80vh; display: flex; flex-direction: column; justify-content: space-between; } .buttons { display: flex; flex-direction: column; justify-content: center; align-items: center; z-index: 99; } .buttons button { width: 600px; height: 70px; margin-top: 20px; background: rgba(159, 135, 159, 0.9); border: 3px solid black; border-radius: 10px; } .buttons button a { text-decoration: none; color: #fff; } </style> </head> <body>  <div class="text"> <h1>Welcome to Interactive Classroom</h1> <div class="buttons"> <button style="margin-left:10px; margin-right: 10px;">[[Start]]</button> <button>[[Exit]]</button> </div> </div> <div class="container"> <div class ="chars"> <div class="char1"> <img src="https://nurtang8.files.wordpress.com/2024/04/karakter-leo-1.png?w=370"></img> </div> <div class="char2"> <img src="https://nurtang8.files.wordpress.com/2024/04/karakter-jennie-1.png?w=310"></img> </div> <div class="char3"> <img src="https://nurtang8.files.wordpress.com/2024/04/karakter-mr.-david.png?w=295"></img> </div> </div> <div class="wrapper" id="demo"></div> </div> <script src="https://code.responsivevoice.org/responsivevoice.js?key=hzQ2RZ0k"></script> <script> var text = "Welcome To Interactive Classroom"; var i = 0; var speed = 60; var link = `<span style="margin-left:10px; margin-right: 10px;">[[Start]]</span> <span>[[Exit]]</span>` function typeWriter() { if (i < text.length) { document.getElementById("demo").innerHTML += text.charAt(i); i++; if(i >= text.length) { document.getElementById("demo").innerHTML += link } setTimeout(typeWriter, speed); } }; function handleRecognitionResult(event) { if (event.results.length > 0) { // Get the recognized speech var speechResult = event.results[0][0].transcript.trim().toLowerCase(); console.log(speechResult) // Log the recognized speech for debugging console.log('Recognized speech:', speechResult); // Define keywords to match var keywords = [ "start", "exit", "yes i want to take an interactive class simulation", "sorry leo i feel less interested in interactive classes i will take another class i think", "go to class", "enter class", "how was the project completed by the team", "when was the project completed by the team", "second question", "does the lesson explained by the teacher", "is the lesson explained by the teacher", "third question", "what was the book written by", "who was the book written by", "fourth question", "how was the new building being constructed downtown", "where was the new building being constructed downtown", "fifth question", "why is a new bridge being designed by the engineers", "who is a new bridge being designed by the engineers", "sixth question", "what is being performed by the orchestra", "when is a classical symphony being performed by the orchestra", "seventh question", "how is food being distributed to the homeless by the volunteers", "where is food being distributed to the homeless by the volunteers", "eight question", "when is the data from the experiment being analyzed by the researchers", "why is the data from the experiment being analyzed by the researchers", "ninth question", "where are the plans for the new building being drawn up by the architects", "what are the plans for the new building being drawn up by the architects", "tenth question", "why are the crops being harvested by the farmers", "when are the crops being harvested by the farmers", "next", ]; // Check if any keyword is found in the speech var foundKeyword = keywords.some(function(keyword) { return speechResult.includes(keyword); }); // If at least one keyword is found, execute story.show() if (foundKeyword) { var choice = null; if (speechResult.includes("start")) { // Go to the "library" passage choice = 'Start'; } else if (speechResult.includes("exit")) { // Go to the "kitchen" passage choice = 'Exit'; } else if (speechResult.includes("yes i want to take an interactive class simulation")) { // Go to the "kitchen" passage choice = "yes, I want to take an interactive class simulation"; } else if (speechResult.includes("sorry leo i feel less interested in interactive classes i will take another class i think")) { // Go to the "kitchen" passage choice = "Sorry Leo, I feel less interested in interactive classes, i will take another class i think"; } else if (speechResult.includes("go to class")) { // Go to the "kitchen" passage choice = "Go to class"; } else if (speechResult.includes("enter class")) { // Go to the "kitchen" passage choice = "Enter class"; } else if (speechResult.includes("how was the project completed by the team")) { // Go to the "kitchen" passage choice = "A) How was the project completed by the team?"; } else if (speechResult.includes("when was the project completed by the team")) { // Go to the "kitchen" passage choice = "B) When was the project completed by the team?"; } else if (speechResult.includes("second question")) { // Go to the "kitchen" passage choice = "Second question"; } else if (speechResult.includes("does the lesson explained by the teacher")) { // Go to the "kitchen" passage choice = "A) Does the lesson explained by the teacher?"; } else if (speechResult.includes("is the lesson explained by the teacher")) { // Go to the "kitchen" passage choice = "B) Is the lesson explained by the teacher?"; } else if (speechResult.includes("third question")) { // Go to the "kitchen" passage choice = "Third question"; } else if (speechResult.includes("what was the book written by")) { // Go to the "kitchen" passage choice = "A) What was the book written by?"; } else if (speechResult.includes("who was the book written by")) { // Go to the "kitchen" passage choice = "B) Who was the book written by?"; } else if (speechResult.includes("fourth question")) { // Go to the "kitchen" passage choice = "Fourth question"; } else if (speechResult.includes("how was the new building being constructed downtown")) { // Go to the "kitchen" passage choice = "A) How was the new building being constructed downtown?"; } else if (speechResult.includes("where was the new building being constructed downtown")) { // Go to the "kitchen" passage choice = "B) Where was the new building being constructed downtown?"; } else if (speechResult.includes("fifth question")) { // Go to the "kitchen" passage choice = "Fifth question"; } else if (speechResult.includes("why is a new bridge being designed by the engineers")) { // Go to the "kitchen" passage choice = "A) Why is a new bridge being designed by the engineers?"; } else if (speechResult.includes("who is a new bridge being designed by the engineers")) { // Go to the "kitchen" passage choice = "B) Who is a new bridge being designed by the engineers?"; } else if (speechResult.includes("sixth question")) { // Go to the "kitchen" passage choice = "Sixth question"; } else if (speechResult.includes("what is being performed by the orchestra")) { // Go to the "kitchen" passage choice = "A) What is being performed by the orchestra?"; } else if (speechResult.includes("when is a classical symphony being performed by the orchestra")) { // Go to the "kitchen" passage choice = "B) When is a classical symphony being performed by the orchestra?"; } else if (speechResult.includes("seventh question")) { // Go to the "kitchen" passage choice = "Seventh question"; } else if (speechResult.includes("how is food being distributed to the homeless by the volunteers")) { // Go to the "kitchen" passage choice = "A) How is food being distributed to the homeless by the volunteers?"; } else if (speechResult.includes("where is food being distributed to the homeless by the volunteers")) { // Go to the "kitchen" passage choice = "B) Where is food being distributed to the homeless by the volunteers?"; } else if (speechResult.includes("eight question")) { // Go to the "kitchen" passage choice = "Eighth question"; } else if (speechResult.includes("when is the data from the experiment being analyzed by the researchers")) { // Go to the "kitchen" passage choice = "A) When is the data from the experiment being analyzed by the researchers?"; } else if (speechResult.includes("why is the data from the experiment being analyzed by the researchers")) { // Go to the "kitchen" passage choice = "B) Why is the data from the experiment being analyzed by the researchers?"; } else if (speechResult.includes("ninth question")) { // Go to the "kitchen" passage choice = "Ninth question"; } else if (speechResult.includes("where are the plans for the new building being drawn up by the architects")) { // Go to the "kitchen" passage choice = "A) Where are the plans for the new building being drawn up by the architects?"; } else if (speechResult.includes("what are the plans for the new building being drawn up by the architects")) { // Go to the "kitchen" passage choice = "B) What are the plans for the new building being drawn up by the architects?"; } else if (speechResult.includes("tenth question")) { // Go to the "kitchen" passage choice = "Tenth question"; } else if (speechResult.includes("why are the crops being harvested by the farmers")) { // Go to the "kitchen" passage choice = "A) Why are the crops being harvested by the farmers?"; } else if (speechResult.includes("when are the crops being harvested by the farmers")) { // Go to the "kitchen" passage choice = "B) When are the crops being harvested by the farmers?"; } else if (speechResult.includes("next")) { // Go to the "kitchen" passage choice = "Next"; } story.show(choice); } else { // Handle unrecognized speech console.log('Unrecognized speech:', speechResult); startSpeechRecognition(); // You can add error handling or prompt the user to repeat } } else { // No speech detected console.log('No speech detected.'); // You can add error handling or prompt the user to repeat } } function startSpeechRecognition() { // Create a new SpeechRecognition object var recognition = new webkitSpeechRecognition(); recognition.lang = 'en-EN' // Event listener for speech recognition result recognition.onresult = handleRecognitionResult; // Event listener for speech recognition error recognition.onerror = function(event) { // Handle speech recognition errors console.error('Speech recognition error:', event.error); // You can add error handling here }; // Start speech recognition recognition.start(); console.log("Start Recog:") } startSpeechRecognition(); typeWriter(); </script> </body> </html>