Question

正如你所看到的，当涉及到javascript时，我是一个巨大的菜鸟。

我正在为学生创建一个练习面试。我想要实现的是5个面试问题一个接一个出现（每个3分钟），在第5个问题结束时重定向页面。

还有一个循环视频，倒计时3分钟。

我试图添加一个按钮，使用户可以转到下一个问题，这也会重置视频计时器。

非常感谢任何帮助！

17/06/2016

Answer 1

<!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>

使用.shift（） - 按钮移动到下一条消息时会显示5条消息

1 个答案: