Speaking Practice
π Interactive Greeting Conversation
English Speaking Practice β Beginner A1
π€ Speaking Practice
Listen to the sentence and try to say it.
π Conversation Completed!
Keep practicing your English greetings!
const dialogs = [
{ situation: "You meet your friend at school in the morning.", speaker: "Sarah:", text: "Good morning, Andi. How are you?", question: "What should Andi say?", choices: [ "Good morning, Sarah. I'm fine, thank you.", "Good night, Sarah.", "Goodbye, Sarah." ], answer: 0 },
{ situation: "You meet your teacher before class.", speaker: "Student:", text: "Good morning, Mr. Brown.", question: "What is the appropriate response?", choices: [ "Good night.", "Good morning.", "See you yesterday." ], answer: 1 },
{ situation: "You meet a new friend.", speaker: "Tom:", text: "Hello! My name is Tom.", question: "What should you say?", choices: [ "Nice to meet you, Tom.", "Good night, Tom.", "I'm sleeping." ], answer: 0 },
{ situation: "You are introduced to a new classmate.", speaker: "Lisa:", text: "Hi! I'm Lisa. What's your name?", question: "What should you say?", choices: [ "My name is Andi.", "Good evening.", "I'm fine." ], answer: 0 },
{ situation: "Your friend asks about your condition.", speaker: "David:", text: "How are you today?", question: "Choose the best answer.", choices: [ "I'm fine, thank you.", "My name is David.", "Good night." ], answer: 0 },
{ situation: "You meet your friend in the afternoon.", speaker: "Anna:", text: "Good afternoon!", question: "What should you say?", choices: [ "Good afternoon!", "Good night!", "Goodbye yesterday!" ], answer: 0 },
{ situation: "You meet someone in the evening.", speaker: "John:", text: "Good evening. How are you?", question: "Choose the best response.", choices: [ "I'm fine, thank you.", "My name is John.", "Good morning." ], answer: 0 },
{ situation: "You are leaving school.", speaker: "Mike:", text: "Goodbye, Sarah. See you tomorrow!", question: "What should Sarah say?", choices: [ "See you tomorrow!", "Good morning!", "My name is Sarah." ], answer: 0 },
{ situation: "You meet an old friend after a long time.", speaker: "Rina:", text: "Hi, Andi! Long time no see!", question: "What is an appropriate response?", choices: [ "Yes! Nice to see you again!", "Good night.", "My name is Andi." ], answer: 0 },
{ situation: "You meet your friend at the library.", speaker: "Budi:", text: "Hi! What are you doing here?", question: "Choose the best response.", choices: [ "I'm studying English.", "Good night.", "My name is English." ], answer: 0 },
{ situation: "You meet a new teacher.", speaker: "Teacher:", text: "Hello. I'm Mr. Wilson.", question: "What should you say?", choices: [ "Nice to meet you, Mr. Wilson.", "Goodbye yesterday.", "I'm sleeping." ], answer: 0 },
{ situation: "Your friend asks where you are going.", speaker: "Dina:", text: "Hi, Andi. Where are you going?", question: "Choose the best response.", choices: [ "I'm going to the classroom.", "Good night.", "My name is classroom." ], answer: 0 },
{ situation: "You are saying goodbye to your teacher.", speaker: "Teacher:", text: "See you tomorrow, students.", question: "What should the students say?", choices: [ "See you tomorrow, Sir!", "Good morning yesterday.", "I'm fine." ], answer: 0 },
{ situation: "You meet your neighbor in the morning.", speaker: "Mr. Lee:", text: "Good morning! Have a nice day!", question: "Choose the best response.", choices: [ "Thank you. You too!", "My name is Lee.", "Good night yesterday." ], answer: 0 },
{ situation: "You are ending a conversation with a friend.", speaker: "Emma:", text: "It was nice talking to you.", question: "What should you say?", choices: [ "Nice talking to you too. Goodbye!", "Good morning!", "My name is Andi." ], answer: 0 }
];
let current = 0; let score = 0; let answered = false;
function loadQuestion() {
answered = false;
const item = dialogs[current];
document.getElementById("currentNumber").textContent = current + 1;
document.getElementById("progressBar").style.width = ((current + 1) / dialogs.length * 100) + "%";
document.getElementById("situation").innerHTML = "Situation: " + item.situation;
document.getElementById("speaker").textContent = item.speaker + " ";
document.getElementById("dialogText").textContent = item.text;
document.getElementById("question").textContent = item.question;
const choicesDiv = document.getElementById("choices");
choicesDiv.innerHTML = "";
item.choices.forEach((choice, index) => {
const button = document.createElement("button");
button.className = "choice";
button.textContent = String.fromCharCode(65 + index) + ". " + choice;
button.onclick = function() { checkAnswer(index, button); };
choicesDiv.appendChild(button);
});
document.getElementById("feedback").style.display = "none";
document.getElementById("nextBtn").style.display = "none";
document.getElementById("speechResult").innerHTML = "";
window.speechSynthesis.cancel(); }
function checkAnswer(selected, button) {
if (answered) return;
answered = true;
const item = dialogs[current];
const allChoices = document.querySelectorAll(".choice");
if (selected === item.answer) {
button.classList.add("correct");
score++;
showFeedback( "β Correct! Excellent answer.", "correct" );
} else {
button.classList.add("wrong");
allChoices[item.answer].classList.add("correct");
showFeedback( "β Not quite. The correct answer is: " + item.choices[item.answer], "wrong" );
}
allChoices.forEach(btn => { btn.style.cursor = "default"; });
document.getElementById("nextBtn").style.display = "inline-block"; }
function showFeedback(text, type) {
const feedback = document.getElementById("feedback");
feedback.textContent = text;
feedback.className = "feedback " + type;
feedback.style.display = "block"; }
function nextQuestion() {
current++;
if (current < dialogs.length) { loadQuestion(); } else { showResult(); } } function showResult() { document.querySelector(".dialog-box").style.display = "none"; document.getElementById("resultScreen").style.display = "block"; document.getElementById("finalScore").textContent = score; let message = ""; if (score === 15) { message = "π Perfect! Excellent English!"; } else if (score >= 12) {
message = "π Great job! Your greeting skills are very good.";
} else if (score >= 9) {
message = "π Good job! Keep practicing.";
} else {
message = "πͺ Keep practicing. You can do it!";
}
document.getElementById("resultMessage").textContent = message; }
function restartQuiz() {
current = 0;
score = 0;
document.querySelector(".dialog-box").style.display = "block";
document.getElementById("resultScreen").style.display = "none";
loadQuestion(); }
function speakText(text) {
if (!("speechSynthesis" in window)) {
alert( "Sorry, your browser does not support audio." );
return; }
window.speechSynthesis.cancel();
const speech = new SpeechSynthesisUtterance(text);
speech.lang = "en-US";
speech.rate = 0.85;
speech.pitch = 1;
window.speechSynthesis.speak(speech); }
function speakDialog() {
const item = dialogs[current];
speakText(item.text); }
function speakTarget() {
const item = dialogs[current];
speakText(item.text); }
function startSpeaking() {
const SpeechRecognition = window.SpeechRecognition || window.webkitSpeechRecognition;
if (!SpeechRecognition) {
document.getElementById("speechResult").innerHTML = "β οΈ Speech recognition is not supported by this browser. Please use Google Chrome.";
return; }
const recognition = new SpeechRecognition();
recognition.lang = "en-US";
recognition.interimResults = false;
recognition.maxAlternatives = 1;
document.getElementById("speechResult").innerHTML = "π€ Listening... Please speak now.";
recognition.start();
recognition.onresult = function(event) {
const result = event.results[0][0].transcript;
const target = dialogs[current].text;
document.getElementById("speechResult").innerHTML = "π£οΈ You said: " + result + "
" + "Target sentence: " + target + "";
};
recognition.onerror = function() {
document.getElementById("speechResult").innerHTML = "β οΈ I couldn't hear you clearly. Please try again.";
};
recognition.onend = function() {
}; }
loadQuestion();