1
Comme vous pouvez le voir, je suis un noob géant quand il s'agit de javascript. Je crée un entretien d'embauche pratique pour les étudiants. Ce que j'essaye de réaliser est 5 questions d'entrevue apparaissant l'une après l'autre (3 minutes chacune) qui redirige la page à la fin de la 5ème question.5 messages apparaissent avec .shift() - bouton pour passer au message suivant
Il existe également une vidéo en boucle avec un compte à rebours de 3 minutes.
J'essaie d'ajouter un bouton qui permet à l'utilisateur de passer à la question suivante, ce qui réinitialise également la minuterie vidéo.
Toute aide serait grandement appréciée!
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<link rel="stylesheet" href="css/normalize.css">
<link rel="stylesheet" type="text/css" href="css/fonts.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>
<img src="../images/banner.jpg">
</header>
<div id="jobInterview">
<h1>Allied Health Assistant Job Interview</h1>
<img src="../images/panelinterview.jpeg" alt="interview panel">
<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>