5 messages appear with .shift() - button to move to next message

Question

As you can see I'm a giant noob when it comes to javascript.

I'm creating a practice job interview for students. What I'm trying to achieve is 5 interview questions appearing one after the other (3 mins each) which redirects the page at the end of the 5th question.

There is also a looping video which has a 3 minute countdown.

I'm trying to add a button which enables the user to move to the next question, which also resets the video timer.

Any help would be much appreciated!

  <h2>Answer the questions provided</h2>
  <p>Note: when the timer finishes it will reset for the next question until the interview is finished</p>
  <h2 id="message"></h2>
  <video id="myVideo" width="160" height="120" autoplay loop>
    <source src="../videos/timer.mp4" type="video/mp4" >
    Your browser does not support the video tag.
  </video>
  <script>
  var questions = [
        "Question 1 <br>  What interests you about this job?",
        "Question 2  <br>What new skills are you looking to develop as an allied health assistant? ",
        "Question 3 <br>Tell me about a successful team project that you have been involved in. What was your role and what made it a success?",
        "Question 4  <br>What is your greatest strength?",
        "Question 5  <br>What are you passionate about? "
    ];

  var vid = document.getElementById("myVideo");

  $( document ).ready(function() {

    function showQuestion() {
    if (questions.length == 0) {
      window.location.replace("../finish.html");
    } 
    else {
          $('#message').html(questions.shift()).fadeIn(500).delay(180000).fadeOut(500);        
    }
  }

  });

  function nextQuestion() {
  $('#message').html(questions.shift()).fadeIn(500).delay(180000).fadeOut(500);
  vid.currentTime=0;
 }

    </script>
    <button id="next-question" onClick="nextQuestion()">Next Question</button>
       </div>   
      </div><!-----CLOSE WRAPPER DIV------>  
    </body>
   </html>

Answer 1 · 2016-08-09T04:11:29Z

August 9, 2016 4:11am

<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Choose your own career adventure</title> <link rel="stylesheet" href="../../css/normalize.css"> <link rel="stylesheet" href="../../css/stylesheet.css"> <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script> </head> <body> <div id="wrapper"> <header id="theheaderhasissues"> <img src="../../images/banner.jpg">
</header> <div id="jobInterview-no-recording"> <h2>Allied Health Assistant Job Interview</h2> <img src="../../images/panelinterview.jpg" alt="interview panel">

  <!--<h3>Answer the questions provided</h3>
  <p>Note: when the timer finishes it will reset for the next question until the interview is finished</p>-->
  <h2 id="timer">Timer</h2>
  <video id="myVideo" width="160" height="120" autoplay>
    <source src="../../videos/timer.mp4" type="video/mp4" >
    Your browser does not support the video tag.
  </video>
  <blockquote class="triangle-isosceles">
  <h3 id="message"></h3>
  </blockquote>

  <script>

   var questions = [
        "Question 1 <br>  What interests you about this job?",
        "Question 2  <br>What new skills are you looking to develop as an allied health assistant? ",
        "Question 3 <br>Tell me about a successful team project that you have been involved in. What was your role and what made it a success?",
        "Question 4  <br>What is your greatest strength?",
        "Question 5  <br>What are you passionate about? "
    ];
    $('#message').hide();
    showQuestion();

    function showQuestion() {
    var vid = document.getElementById("myVideo");
    if (questions.length == 0) {
    window.location.replace("../../finish.html");
    } 
    else {
    vid.currentTime=0;
    vid.play();
    $('#message').html(questions.shift()).fadeIn(100).delay(180000).fadeOut(100, showQuestion);

    }
 }

  function nextQuestion() {
  var vid = document.getElementById("myVideo");
  if (questions.length == 0) {
    window.location.replace("../../finish.html");
    } 

  else {  
  vid.currentTime=0;
  vid.play();
  $('#message').html(questions.shift()).fadeIn(100).delay(180000).fadeOut(100, nextQuestion);

 }

}

function reload() {

  location.reload();
}

  </script>
<ul id="buttons">
  <li><button onclick="reload()">Start Again</button></li>
  <li><a href="../../finish.html" id="finish">Finish</a></li>
  <li><button id="next-question" onclick="nextQuestion()">Next Question</button></li>
</ul>
</div><!--CLOSE SETTINGS NAVIGATION DIV-->  

    <footer>
  <ul>
    <li><a href="javascript:history.back()"><img src="../../images/left-arrow.png"></li>
    <li><a href="../../index.html"><img src="../../images/home-button.png"></li>

    </ul> 
   <br>
  <br>
  <p>© Can Stock Photo Inc. / goldenKB , http://www.canstockphoto.com/job-interview-26160264.html</p>
</footer>
    </div><!-----CLOSE WRAPPER DIV------>

</body> </html>

Answer 2 · 2016-06-20T16:14:37Z

June 20, 2016 4:14pm

In the button code, the correct attribute is "onclick", not "onClick".
You should move your if/else statement from showQuestion() to nextQuestion().

Welcome to the Treehouse Community

Looking to learn something new?

Danielle Teychenne

Danielle Teychenne

5 messages appear with .shift() - button to move to next message

2 Answers

Danielle Teychenne

Danielle Teychenne

Davy Wong

Davy Wong

Danielle Teychenne

Danielle Teychenne