Close HTML item
Hi all,
I've made a little distractor task for a retention interval in HTML with an inline HTML item, but I can't get it to move on after it's finished. I've included a minimal example in the post. When the time runs out, it should set vars.game_over to 1. The task runs inside a loop that's set to break if [game_over] == 1. Instead, after the timer reaches zero it just carries on.
Is there a way to close an HTML item after a certain amount of time so the experiment can move on?
Thanks in advance,
Joel
<!DOCTYPE html>
<html>
<body>
<div id="gameDiv">
<h2>Number Guessing Game</h2>
<button type="button" onclick="playGame()">Start Game</button>
<p id="message"></p>
</div>
<script>
// Prepare phase
var gameIsOver = false;
var timeLeft = 5; // Time left in seconds for simplicity
// Create an object called vars with a property game_over
var vars = {
game_over: 0 // Initially set to 0
};
// Game logic
function playGame() {
document.getElementById("message").innerHTML = "Game started. You have " + timeLeft + " seconds.";
// Call the run function every second to check the game status
var intervalId = setInterval(run, 1000);
}
// Run phase
function run() {
// Update the timer
timeLeft--;
if (timeLeft > 0) {
document.getElementById("message").innerHTML = "Time left: " + timeLeft + " seconds";
} else {
// End the current item and move on to the next one
document.getElementById("message").innerHTML = "Time's up! Game over.";
gameIsOver = true; // Set the game over flag
vars.game_over = 1; // Set vars.game_over to 1 when the game is over
}
}
</script>
</body>
</html>
Comments
Hi @joelsolo99,
This is really more an issue of HTML programmnig than something related to Open Sesame. You should be able to close the HTML page by using the window.closed() function.
Here's a modified version of your code that closes the window at the end of the 5 seconds interval. I tried it out with Chrome and Edge and it worked. However, keep in mind that some browser might not close the window if their security settings restrict it.
<!DOCTYPE html><html><body><div id="gameDiv"><h2>Number Guessing Game</h2><button type="button" onclick="playGame()">Start Game</button><p id="message"></p></div><script>// Prepare phasevar gameIsOver = false;var timeLeft = 5; // Time left in seconds for simplicity// Create an object called vars with a property game_overvar vars = {game_over: 0 // Initially set to 0};// Game logicfunction playGame() {document.getElementById("message").innerHTML = "Game started. You have " + timeLeft + " seconds.";// Call the run function every second to check the game statusvar intervalId = setInterval(run, 1000);}// Run phasefunction run() {// Update the timertimeLeft--;if (timeLeft > 0) {document.getElementById("message").innerHTML = "Time left: " + timeLeft + " seconds";} else {// End the current item and move on to the next onedocument.getElementById("message").innerHTML = "Time's up! Game over.";gameIsOver = true; // Set the game over flagvars.game_over = 1; // Set vars.game_over to 1 when the game is overcloseWindow(); // Call function to close the window}}// Function to close the windowfunction closeWindow() {window.close();}</script></body></html>Hope this helps,
Fabrice.
Hi Fabrice,
Thank you for your help. Unfortunately using window.close() actually closes the tab rather than move the experiment on to the next item. I've also tried using 'return;' but nothing happens. I am quite new to HTML so I wasn't sure if this was an HTML or an OSWeb issue.
Thanks again,
Joel