My Favorite Film

🎧 B1 Listening Test My Favourite Film Listen to the speakers and choose the correct answer. 🎧 Listen to the Audio Your browser does not support the audio element. You can listen more than once. Question 1 of 20 Score: 0 #mafen-favourite-film-quiz { max-width: 720px; margin: 30px auto; padding: 25px; background: #fdfdfd; border: 1px solid #e0e0e0; border-radius: 14px; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; box-shadow: 0 5px 15px rgba(0,0,0,0.06); box-sizing: border-box; } #mafen-favourite-film-quiz *, #mafen-favourite-film-quiz *::before, #mafen-favourite-film-quiz *::after { box-sizing: border-box; } /* HEADER */ .ff-header { text-align: center; margin-bottom: 25px; } .ff-header h2 { margin: 0 0 5px; color: #2c3e50; font-size: 28px; font-weight: 700; } .ff-header h3 { margin: 0 0 8px; color: #3498db; font-size: 20px; font-weight: 600; } .ff-header p { margin: 0; color: #7f8c8d; font-size: 15px; } /* AUDIO */ .ff-audio-box { background: #ebf3f9; border-radius: 10px; padding: 20px; margin-bottom: 25px; text-align: center; border: 1px solid #d6e6f2; } .ff-audio-title { color: #2c3e50; font-weight: 700; font-size: 17px; margin-bottom: 12px; } .ff-audio-box audio { width: 100%; max-width: 600px; } .ff-audio-box p { margin: 10px 0 0; color: #566573; font-size: 13px; } /* PROGRESS */ .ff-progress { margin-bottom: 25px; } .ff-progress-info { display: flex; justify-content: space-between; align-items: center; margin-bottom: 8px; font-size: 14px; color: #566573; } .ff-progress-info strong { color: #2c3e50; } .ff-progress-bar { width: 100%; height: 9px; background: #ecf0f1; border-radius: 10px; overflow: hidden; } #ff-progress-fill { width: 5%; height: 100%; background: #3498db; border-radius: 10px; transition: width .3s ease; } /* QUESTION */ .ff-card { background: #ffffff; padding: 25px; margin-bottom: 20px; border-radius: 10px; border-left: 5px solid #3498db; box-shadow: 0 3px 8px rgba(0,0,0,0.04); } .ff-topic { display: inline-block; font-size: 11px; text-transform: uppercase; letter-spacing: .5px; color: #3498db; font-weight: 700; margin-bottom: 10px; } .ff-question { font-size: 18px; line-height: 1.6; font-weight: 600; color: #2c3e50; margin-bottom: 20px; } /* OPTIONS */ .ff-options { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; } .ff-option { width: 100%; padding: 13px 15px; background: #f8f9fa; border: 1px solid #dcdde1; border-radius: 7px; text-align: left; font-size: 15px; color: #2c3e50; cursor: pointer; transition: all .2s ease; } .ff-option:hover:not(:disabled) { background: #e1b12c; color: white; border-color: #e1b12c; transform: translateY(-1px); } .ff-option:disabled { cursor: default; } .ff-option.correct { background: #2ecc71 !important; color: white !important; border-color: #2ecc71 !important; } .ff-option.incorrect { background: #e74c3c !important; color: white !important; border-color: #e74c3c !important; } /* FEEDBACK */ .ff-feedback { margin-top: 18px; padding: 14px 16px; border-radius: 7px; font-size: 14px; line-height: 1.6; } .ff-feedback.correct-feedback { background: #d4edda; color: #155724; border: 1px solid #c3e6cb; } .ff-feedback.incorrect-feedback { background: #f8d7da; color: #721c24; border: 1px solid #f5c6cb; } .ff-feedback strong { display: block; margin-bottom: 5px; } /* NEXT */ .ff-next { width: 100%; margin-top: 20px; padding: 13px 20px; border: none; border-radius: 7px; background: #3498db; color: white; font-size: 15px; font-weight: 600; cursor: pointer; } .ff-next:hover { background: #2980b9; } /* RESULT */ #ff-result { text-align: center; margin-top: 25px; padding: 30px 20px; background: #ebf3f9; border-radius: 10px; } .ff-result-title { font-size: 28px; font-weight: 700; color: #2c3e50; } .ff-result-score { font-size: 42px; font-weight: 800; color: #3498db; margin: 12px 0; } .ff-result-message { font-size: 16px; color: #566573; line-height: 1.6; margin-bottom: 20px; } .ff-restart { padding: 12px 25px; background: #2c3e50; color: white; border: none; border-radius: 7px; font-size: 15px; font-weight: 600; cursor: pointer; } .ff-restart:hover { background: #1f2d3a; } /* MOBILE */ @media (max-width: 600px) { #mafen-favourite-film-quiz { margin: 15px auto; padding: 18px; } .ff-header h2 { font-size: 23px; } .ff-card { padding: 18px; } .ff-question { font-size: 16px; } .ff-options { grid-template-columns: 1fr; } .ff-result-score { font-size: 35px; } } document.addEventListener("DOMContentLoaded", function () { const quizData = [ { topic: "SPEAKER A", question: "What is Speaker A's favourite film?", options: [ { text: "Skyfall", correct: false, reason: "Speaker B's favourite film is Skyfall." }, { text: "The Notebook", correct: true, reason: "Correct! Speaker A says that The Notebook is her favourite film." }, { text: "The Matrix", correct: false, reason: "The Matrix is Speaker D's favourite film." }, { text: "Pride and Prejudice", correct: false, reason: "Pride and Prejudice is Speaker C's favourite film." } ] }, { topic: "THE NOTEBOOK", question: "Why don't Allie's parents approve of Noah?", options: [ { text: "He is too young.", correct: false, reason: "The problem is that Noah is poor." }, { text: "He is poor.", correct: true, reason: "Correct! Allie's parents don't approve of Noah because he is poor." }, { text: "He lives abroad.", correct: false, reason: "Living abroad is not the reason." }, { text: "He doesn't go to college.", correct: false, reason: "This is not mentioned." } ] }, { topic: "THE NOTEBOOK", question: "What does Noah do every day after Allie goes to college?", options: [ { text: "He visits her.", correct: false, reason: "He writes to her every day." }, { text: "He phones her.", correct: false, reason: "The speaker says he writes to her." }, { text: "He writes to her.", correct: true, reason: "Correct! Noah writes to Allie every day, but she doesn't receive the letters." }, { text: "He sends her photographs.", correct: false, reason: "Photographs are not mentioned." } ] }, { topic: "THE NOTEBOOK", question: "Why does Noah restore the old house?", options: [ { text: "He wants to sell it.", correct: false, reason: "He promised to restore it for Allie." }, { text: "He promised to restore it for Allie.", correct: true, reason: "Correct! Noah buys and restores an old house because he promised Allie he would." }, { text: "His parents ask him to.", correct: false, reason: "His parents are not mentioned." }, { text: "He wants to become an architect.", correct: false, reason: "This is not mentioned." } ] }, { topic: "SKYFALL", question: "Who plays James Bond in Skyfall?", options: [ { text: "Javier Bardem", correct: false, reason: "Javier Bardem plays the villain." }, { text: "Daniel Craig", correct: true, reason: "Correct! Daniel Craig plays James Bond." }, { text: "Judi Dench", correct: false, reason: "Judi Dench plays M." }, { text: "Adele", correct: false, reason: "Adele sings the theme song." } ] }, { topic: "SKYFALL", question: "What is different about Skyfall compared with other Bond films?", options: [ { text: "There is no action.", correct: false, reason: "There is still a lot of action." }, { text: "The story is more important.", correct: true, reason: "Correct! The speaker says the story is more important in Skyfall." }, { text: "Bond never fights anyone.", correct: false, reason: "This is not mentioned." }, { text: "It is mainly a comedy.", correct: false, reason: "Skyfall is an action film." } ] }, { topic: "SKYFALL", question: "Where are some of the scenes in Skyfall filmed?", options: [ { text: "Paris and Rome", correct: false, reason: "The speaker mentions Shanghai and Scotland." }, { text: "Shanghai and Scotland", correct: true, reason: "Correct! The speaker especially likes the scenes shot in Shanghai and Scotland." }, { text: "London and New York", correct: false, reason: "These locations are not mentioned." }, { text: "Tokyo and Sydney", correct: false, reason: "These locations are not mentioned." } ] }, { topic: "SKYFALL", question: "Who sings the song in Skyfall?", options: [ { text: "Rachel McAdams", correct: false, reason: "Rachel McAdams acts in The Notebook." }, { text: "Keira Knightley", correct: false, reason: "Keira Knightley acts in Pride and Prejudice." }, { text: "Adele", correct: true, reason: "Correct! Adele sings the Skyfall theme song." }, { text: "Judi Dench", correct: false, reason: "Judi Dench plays M." } ] }, { topic: "PRIDE AND PREJUDICE", question: "Who plays Elizabeth Bennet?", options: [ { text: "Rachel McAdams", correct: false, reason: "Rachel McAdams plays Allie in The Notebook." }, { text: "Keira Knightley", correct: true, reason: "Correct! Keira Knightley plays Elizabeth Bennet." }, { text: "Judi Dench", correct: false, reason: "Judi Dench plays M in Skyfall." }, { text: "Adele", correct: false, reason: "Adele sings the Skyfall theme song." } ] }, { topic: "PRIDE AND PREJUDICE", question: "What does Elizabeth initially think about Mr Darcy?", options: [ { text: "He is kind and friendly.", correct: false, reason: "At first she thinks he is stuck-up and snobbish." }, { text: "He is stuck-up and snobbish.", correct: true, reason: "Correct! Elizabeth initially has a negative opinion of Mr Darcy." }, { text: "He is poor.", correct: false, reason: "His wealth is actually mentioned later." }, { text: "He is funny.", correct: false, reason: "This is not her initial opinion." } ] }, { topic: "PRIDE AND PREJUDICE", question: "What does Elizabeth realise at the end?", options: [ { text: "She was completely wrong about Darcy.", correct: true, reason: "Correct! She realises that her initial judgement of Darcy was completely wrong." }, { text: "Darcy is poor.", correct: false, reason: "Darcy actually has an enormous house." }, { text: "She doesn't like Darcy.", correct: false, reason: "She falls in love with him." }, { text: "The story is not romantic.", correct: false, reason: "The speaker describes it as romantic." } ] }, { topic: "BOOK", question: "What does Speaker C do after watching Pride and Prejudice?", options: [ { text: "She reads the book by Jane Austen.", correct: true, reason: "Correct! She reads the original book after seeing the film." }, { text: "She watches Skyfall.", correct: false, reason: "This is another speaker's film." }, { text: "She visits England.", correct: false, reason: "This is not mentioned." }, { text: "She meets Keira Knightley.", correct: false, reason: "This is not mentioned." } ] }, { topic: "THE MATRIX", question: "When was The Matrix made?", options: [ { text: "1989", correct: false, reason: "The film was made in 1999." }, { text: "1995", correct: false, reason: "The correct year is 1999." }, { text: "1999", correct: true, reason: "Correct! Speaker D says the film was made back in 1999." }, { text: "2005", correct: false, reason: "The film was released in 1999." } ] }, { topic: "THE MATRIX", question: "What does Neo do during the day?", options: [ { text: "He works with computers.", correct: true, reason: "Correct! Neo works with computers during the day." }, { text: "He works as a police officer.", correct: false, reason: "He works with computers." }, { text: "He teaches science.", correct: false, reason: "Teaching is not mentioned." }, { text: "He works in a cinema.", correct: false, reason: "He works with computers." } ] }, { topic: "THE MATRIX", question: "What is Neo at night?", options: [ { text: "A detective", correct: false, reason: "Neo is a hacker at night." }, { text: "A hacker", correct: true, reason: "Correct! Neo works as a hacker at night." }, { text: "A journalist", correct: false, reason: "This is not mentioned." }, { text: "A computer teacher", correct: false, reason: "He is a hacker." } ] }, { topic: "THE MATRIX", question: "What does Morpheus explain to Neo?", options: [ { text: "That he should become a police officer.", correct: false, reason: "Morpheus explains the true nature of reality." }, { text: "That what he thinks is real is actually fiction.", correct: true, reason: "Correct! This is the central idea of the film described by Speaker D." }, { text: "That computers are no longer useful.", correct: false, reason: "This is not the point of the conversation." }, { text: "That he should leave the city.", correct: false, reason: "This is not mentioned." } ] }, { topic: "VAMPIRE FILM", question: "Which version of Let the Right One In does Speaker E prefer?", options: [ { text: "The American version", correct: false, reason: "She prefers the original Swedish version." }, { text: "The Swedish version", correct: true, reason: "Correct! She prefers the original Swedish version." }, { text: "Both equally", correct: false, reason: "She clearly says she prefers the Swedish version." }, { text: "She has only seen the American version.", correct: false, reason: "She prefers the original Swedish version." } ] }, { topic: "LET THE RIGHT ONE IN", question: "Why does Oskar want revenge?", options: [ { text: "He is being bullied at school.", correct: true, reason: "Correct! Oskar is being bullied and wants revenge on the bullies." }, { text: "His parents have left him.", correct: false, reason: "This is not mentioned." }, { text: "His friend has betrayed him.", correct: false, reason: "This is not mentioned." }, { text: "He wants to become a vampire.", correct: false, reason: "This is not the reason for his revenge." } ] }, { topic: "OVERALL COMPREHENSION", question: "Which statement is TRUE according to the listening?", options: [ { text: "All five speakers prefer action films.", correct: false, reason: "The speakers describe romances, action, science fiction and vampire films." }, { text: "The five speakers have different favourite films.", correct: true, reason: "Correct! Each speaker describes a different favourite film." }, { text: "All five speakers talk about the same actor.", correct: false, reason: "Different actors are mentioned in the different films." }, { text: "None of the speakers talks about a film based on a book.", correct: false, reason: "The Notebook and Pride and Prejudice involve stories based on books." } ] } ]; let currentQuestion = 0; let score = 0; const questionsContainer = document.getElementById("ff-questions"); const resultContainer = document.getElementById("ff-result"); const currentNumber = document.getElementById("ff-current"); const totalNumber = document.getElementById("ff-total"); const scoreDisplay = document.getElementById("ff-score"); const progressFill = document.getElementById("ff-progress-fill"); totalNumber.textContent = quizData.length; function loadQuestion() { const question = quizData[currentQuestion]; currentNumber.textContent = currentQuestion + 1; scoreDisplay.textContent = score; progressFill.style.width = ( (currentQuestion + 1) / quizData.length * 100 ) + "%"; let html = ` B1 LISTENING COMPREHENSION ${currentQuestion + 1}. ${question.question} `; question.options.forEach( function(option, index) { html += ` ${option.text} `; } ); html += ` `; questionsContainer.innerHTML = html; const buttons = questionsContainer.querySelectorAll( ".ff-option" ); buttons.forEach( function(button) { button.addEventListener( "click", function() { const selectedIndex = parseInt( this.getAttribute( "data-index" ) ); checkAnswer( selectedIndex, buttons ); } ); } ); } function checkAnswer( selectedIndex, buttons ) { const question = quizData[currentQuestion]; buttons.forEach( function(button) { button.disabled = true; } ); const selectedButton = buttons[selectedIndex]; const correctIndex = question.options.findIndex( function(option) { return option.correct === true; } ); const correctButton = buttons[correctIndex]; if ( question.options[selectedIndex].correct ) { score++; selectedButton.classList.add( "correct" ); } else { selectedButton.classList.add( "incorrect" ); correctButton.classList.add( "correct" ); } scoreDisplay.textContent = score; const feedback = document.getElementById( "ff-feedback" ); if ( question.options[selectedIndex].correct ) { feedback.className = "ff-feedback correct-feedback"; feedback.innerHTML = "✓ Correct!" + question.options[selectedIndex].reason; } else { feedback.className = "ff-feedback incorrect-feedback"; feedback.innerHTML = "✗ Incorrect." + question.options[selectedIndex].reason + "" + "Correct answer: " + question.options[correctIndex].text; } feedback.style.display = "block"; if ( currentQuestion < quizData.length - 1 ) { const nextButton = document.createElement("button"); nextButton.type = "button"; nextButton.className = "ff-next"; nextButton.textContent = "Next Question →"; nextButton.addEventListener( "click", function() { currentQuestion++; loadQuestion(); window.scrollTo({ top: questionsContainer.offsetTop - 20, behavior: "smooth" }); } ); feedback.parentNode.appendChild( nextButton ); } else { const finishButton = document.createElement("button"); finishButton.type = "button"; finishButton.className = "ff-next"; finishButton.textContent = "View My Result"; finishButton.addEventListener( "click", showResult ); feedback.parentNode.appendChild( finishButton ); } } function showResult() { questionsContainer.style.display = "none"; const percentage = Math.round( ( score / quizData.length ) * 100 ); let message; if (percentage >= 90) { message = "Excellent! You understood the speakers and their opinions very well."; } else if (percentage >= 75) { message = "Very good! You understood most of the important details."; } else if (percentage >= 60) { message = "Good effort! Listen again and focus on characters, plots and film genres."; } else { message = "Keep practising! Listen again and focus on the different speakers and their favourite films."; } resultContainer.innerHTML = ` Listening Test Complete! ${score} / ${quizData.length} ${percentage}% ${message} ↻ Restart Test `; resultContainer.style.display = "block"; document .getElementById("ff-restart") .addEventListener( "click", restartQuiz ); resultContainer.scrollIntoView({ behavior: "smooth", block: "center" }); } function restartQuiz() { currentQuestion = 0; score = 0; resultContainer.style.display = "none"; questionsContainer.style.display = "block"; scoreDisplay.textContent = "0"; loadQuestion(); window.scrollTo({ top: questionsContainer.offsetTop - 20, behavior: "smooth" }); } loadQuestion(); });