Part 1.2 questions time, end time audio...

- Part 1.2 questions time change, first question 45 seconds, the others 30 seconds
- Part 2 question display in list aligned to left
- Mobile responsive UI, small intro font
- 'Skip' button for intros.

Tests/Test1/questions.json

@@ -21,10 +21,10 @@
       "answerTime": 45,
       "questions": [
         {
-          "question1Part1.2": "How do these two places make you feel, and which one would you prefer for studying?"
+          "question1Part1.2": "Describe what you see in these 2 pictures."
         },
         {
-          "question2Part1.2": "What are the people in each picture doing, and how are their activities different from each other?"
+          "question2Part1.2": "How do these two places make you feel, and which one would you prefer for studying?"
         },
         {
           "question3Part1.2": "What advantages might there be to studying in a place like the one shown in the second picture?"

Tests/Test2/questions.json

@@ -2,8 +2,8 @@
   "parts": [
     {
       "part": "Part 1.1",
-      "prepareTime": 1,
-      "answerTime": 3,
+      "prepareTime": 10,
+      "answerTime": 30,
       "questions": [
         {
           "question1Part1.1": "What is your favorite hobby, and why do you enjoy it?"
@@ -19,14 +19,14 @@
     {
       "part": "Part 1.2",
       "images": ["1.jpg", "2.jpg"],
-      "prepareTime": 1,
-      "answerTime": 4,
+      "prepareTime": 10,
+      "answerTime": 45,
       "questions": [
         {
-          "question1Part1.2": "How are these two situations similar?"
+          "question1Part1.2": "Describe what you see in these 2 pictures."
         },
         {
-          "question2Part1.2": "What do you think makes these situations enjoyable?"
+          "question2Part1.2": "How are these two situations similar?"
         },
         {
           "question3Part1.2": "If you could choose, which situation would you prefer and why?"
@@ -36,8 +36,8 @@
     {
       "part": "Part 2",
       "images": ["3.avif"],
-      "prepareTime": 6,
-      "answerTime": 12,
+      "prepareTime": 60,
+      "answerTime": 120,
       "questions": [
         {
           "question1Part2": "What are the advantages of using smartphones?"
@@ -68,8 +68,8 @@
           }
         }
       ],
-      "prepareTime": 6,
-      "answerTime": 12
+      "prepareTime": 60,
+      "answerTime": 120
     }
   ]
 }

Tests/Test3/questions.json

@@ -23,7 +23,7 @@
       "answerTime": 45,
       "questions": [
         {
-          "question1Part1.2": "What do these images tell you about how people spend their free time?"
+          "question1Part1.2": "Describe what you see in these 2 pictures."
         },
         {
           "question2Part1.2": "Which place would you prefer to spend time in? Why?"

Tests/Test4Demo/questions.json

@@ -0,0 +1,75 @@
+{
+  "parts": [
+    {
+      "part": "Part 1.1",
+      "prepareTime": 1,
+      "answerTime": 3,
+      "questions": [
+        {
+          "question1Part1.1": "What do you like to do in the mornings?"
+        },
+        {
+          "question2Part1.1": "Do you enjoy reading books? Why or why not?"
+        },
+        {
+          "question3Part1.1": "What kind of music do you like?"
+        }
+      ]
+    },
+    {
+      "part": "Part 1.2",
+      "images": ["1.jpg", "2.jpg"],
+      "prepareTime": 1,
+      "answerTime": 4,
+      "questions": [
+        {
+          "question1Part1.2": "What do these images tell you about how people spend their free time?"
+        },
+        {
+          "question2Part1.2": "Which place would you prefer to spend time in? Why?"
+        },
+        {
+          "question3Part1.2": "How do these places make you feel?"
+        }
+      ]
+    },
+    {
+      "part": "Part 2",
+      "images": ["3.jpeg"],
+      "prepareTime": 6,
+      "answerTime": 12,
+      "questions": [
+        {
+          "question1Part2": "What makes city life exciting for people?"
+        },
+        {
+          "question1Part2": "What are some challenges of living in a busy city?"
+        },
+        {
+          "question1Part2": "How can cities become more enjoyable for everyone?"
+        }
+      ]
+    },
+    {
+      "part": "Part 3",
+      "description": "Argument Discussion",
+      "questions": [
+        {
+          "statement": "Car ownership is useful, but it's bad for the environment",
+          "For": {
+            "fact1": "Cars help people travel quickly and easily.",
+            "fact2": "They are essential for areas with poor public transport",
+            "fact3": "Cars allow for flexibility in planning trips"
+          },
+          "Against": {
+            "fact1": "Cars produce harmful emissions that pollute the air",
+            "fact2": "Traffic jams cause stress and waste time",
+            "fact3": "Public transport is often more eco-friendly"
+          }
+        }
+      ],
+      "prepareTime": 6,
+      "answerTime": 12
+    }
+  ]
+}

Txt files/prompt.txt

@@ -7,8 +7,8 @@ Part 1.1
 
 Part 1.2
 Briefly about the part: You will now see 2 pictures. You need to answer some questions based on these pictures" 
-- 30 seconds to answer.
-- 5 questions (not separately 3 questions for each image, but generally 3 questions for 2 images).  
+- The first question is always 'Describe what you see in these 2 pictures.'
+- 3 questions (not separately 3 questions for each image, but generally 3 questions for 2 images).  
 - And please describe the images so that I could find them on internet and answer to your question.  
 
 Part 2

app.js

@@ -8,13 +8,12 @@ document.addEventListener("DOMContentLoaded", () => {
     }
 
     start(duration, label, callback, hideTimer = false) {
-      this.instructionDisplay.textContent = label;
-
-      // Clear or show the timer display based on the hideTimer flag
-      if (hideTimer) {
-        this.timerDisplay.textContent = "";
-      } else {
+      if (!hideTimer) {
+        this.instructionDisplay.textContent = label;
         this.updateTimerDisplay(duration);
+      } else {
+        this.instructionDisplay.textContent = ""; // Clear label for hidden timer
+        this.timerDisplay.textContent = "";
       }
 
       if (!hideTimer) {
@@ -54,12 +53,20 @@ document.addEventListener("DOMContentLoaded", () => {
       this.currentQuestionIndex = 0;
       this.data = null;
       this.timer = new TestTimer(this.timerDisplay, this.instructionDisplay);
+      this.skipButton = document.getElementById("skip-button");
+
+      // Attach event listener to the skip button
+      this.skipButton.addEventListener("click", () => {
+        this.skipIntro();
+      });
 
       // Audios
       this.specialSound = new Audio("Audios/special.mp3");
       this.startingExamSound = new Audio("Audios/starting(MultilevelExam).mp3");
       this.sayYourName = new Audio("Audios/tellYourFullName.mp3");
       this.thankYou = new Audio("Audios/ThankYou.mp3");
+      this.endAnswerTimeAudio = new Audio("Audios/time-is-up.mp3");
+      this.endExamAudio = new Audio("Audios/endExam.mp3");
       this.yourExamStartsAudio = new Audio(
         "Audios/yourExamStartsin10seconds.mp3"
       );
@@ -71,18 +78,34 @@ document.addEventListener("DOMContentLoaded", () => {
         "Part 3": new Audio("Audios/part3.mp3"),
       };
     }
+
     playAudio(audio) {
       return new Promise((resolve) => {
         audio.play().catch(() => {});
         audio.onended = resolve;
       });
     }
+
+    skipIntro() {
+      if (this.currentAudio) {
+        this.currentAudio.pause(); // Pause current audio
+        this.currentAudio.currentTime = 0; // Reset playback to start
+      }
+
+      // Stop any ongoing audio promises
+      this.audioSkipped = true;
+
+      // Hide skip button and move directly to the next part
+      this.skipButton.classList.add("hidden");
+      this.displayPart(this.data.parts[this.currentPartIndex]);
+    }
+
     async playIntroForPart(part, callback) {
       const introText = {
         "Part 1.1":
           "Part 1.1. In this part, I will ask you a few questions about yourself. For each question, you will have 30 seconds to answer. You should speak after this sound.",
         "Part 1.2":
-          "Part 1.2. You will now see 2 pictures. You need to answer some questions based on these pictures. You will have 45 seconds to answer each question. You should speak after this sound.",
+          "Part 1.2. You will now see 2 pictures. You need to answer some questions based on these pictures. You will have 30 seconds to answer each question. You should speak after this sound.",
         "Part 2":
           "Part 2. You will be given a picture followed by 3 questions. You do not need to describe the picture, but focus on the questions provided. You will have 1 minute to prepare for the questions and 2 minutes to answer them. You should speak after this sound.",
         "Part 3":
@@ -92,18 +115,45 @@ document.addEventListener("DOMContentLoaded", () => {
       const audio = this.introAudios[part];
       const text = introText[part] || "Get ready for the next part.";
 
-      // Display intro message and clear "Answer the question" label
+      // Reset skip state
+      this.audioSkipped = false;
+
+      // Hide the timer and clear the instruction label for intros
+      this.timerDisplay.textContent = "";
+      this.instructionDisplay.textContent = "";
+
+      // Display skip button
+      this.skipButton.classList.remove("hidden");
+
+      // Display intro message
       this.displayMessage(text);
-      this.instructionDisplay.textContent = ""; // Clear label for intros
 
-      // Play the intro audio
-      await this.playAudio(audio);
+      // Play audio and special sound sequentially
+      try {
+        this.currentAudio = audio;
+
+        // Play intro audio
+        await this.playAudio(audio);
+
+        // If skipped during audio, stop further processing
+        if (this.audioSkipped) return;
+
+        // Play special sound
+        this.currentAudio = this.specialSound;
+        await this.playAudio(this.specialSound);
 
-      // Play the special sound
-      await this.playAudio(this.specialSound);
+        // If skipped during audio, stop further processing
+        if (this.audioSkipped) return;
 
-      // Call the callback after all sounds have played
-      callback();
+        // Call the callback after sounds complete
+        callback();
+      } catch (err) {
+        console.error("Audio playback interrupted or skipped.");
+      } finally {
+        // Hide the skip button after the intro
+        this.skipButton.classList.add("hidden");
+        this.currentAudio = null;
+      }
     }
 
     startTest(testName) {
@@ -162,6 +212,7 @@ document.addEventListener("DOMContentLoaded", () => {
     displayPart(part) {
       // Clear previous images and questions when a new part starts
       this.clearImagesAndQuestions();
+      this.skipButton.classList.add("hidden"); // Ensure the skip button is hidden
 
       if (["Part 2", "Part 3"].includes(part.part)) {
         this.mainMessage.textContent = "";
@@ -213,9 +264,18 @@ document.addEventListener("DOMContentLoaded", () => {
 
       const question = part.questions[this.currentQuestionIndex];
       this.displayMessage(Object.values(question)[0]);
+
+      let answerTime = part.answerTime;
+      if (part.part === "Part 1.2" && this.currentQuestionIndex === 0) {
+        answerTime = 45; // Set 45 seconds for the first question
+      }
+
       this.timer.start(part.prepareTime, "Please prepare!", () => {
         this.specialSound.play();
-        this.timer.start(part.answerTime, "Answer the question", () => {
+
+        // Start the answer time with the determined duration
+        this.timer.start(answerTime, "Answer the question", () => {
+          this.endAnswerTimeAudio.play(); // Play the audio when answer time finishes
           this.currentQuestionIndex++;
           this.nextQuestion(part);
         });
@@ -237,10 +297,11 @@ document.addEventListener("DOMContentLoaded", () => {
     displayQuestions(questions) {
       // Clear previous questions
       this.questionDisplay.innerHTML = "";
-      // Append new questions
-      this.questionDisplay.innerHTML = questions
-        .map((q) => `<p class="part2-questions">${Object.values(q)[0]}</p>`)
+      // Append new questions as a list
+      const questionList = questions
+        .map((q) => `<li style="text-align: left;">${Object.values(q)[0]}</li>`)
         .join("");
+      this.questionDisplay.innerHTML = `<ul>${questionList}</ul>`;
     }
 
     displayArgumentTable(argument) {
@@ -287,6 +348,7 @@ document.addEventListener("DOMContentLoaded", () => {
       this.timer.start(part.prepareTime, "Please prepare!", () => {
         this.specialSound.play();
         this.timer.start(part.answerTime, "Answer", () => {
+          this.endAnswerTimeAudio.play(); // Play the audio when answer time finishes
           this.currentPartIndex++;
           this.nextPart();
         });
@@ -301,7 +363,8 @@ document.addEventListener("DOMContentLoaded", () => {
       document.getElementById("image-container").classList.add("hidden");
 
       // Show end screen message
-      this.displayMessage("This is the end of the Speaking Test. Thank you!");
+      this.displayMessage("This is the end of the Speaking Test.");
+      this.endAnswerTimeAudio.play().catch(() => {});
 
       // Create the 'Go to Home' button dynamically
       const endButton = document.createElement("button");
@@ -320,11 +383,4 @@ document.addEventListener("DOMContentLoaded", () => {
 
   const testController = new TestController();
   window.startTest = testController.startTest.bind(testController);
-
-  // testNames.forEach((testName) => {
-  //   const button = document.createElement("button");
-  //   button.textContent = testName;
-  //   button.onclick = () => startTest(testName);
-  //   buttonContainer.appendChild(button);
-  // });
 });