Andre/Bachelor-Thesis
Public Access
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

init

Browse Source
This commit is contained in:
Andreas Wilms
2025-09-08 16:25:55 +02:00
commit cdcd870b6f
614 changed files with 343437 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

79
PCSurvey/PCstatic/html/feedback.html Normal file
View File

@@ -0,0 +1,79 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
<style>
body {
font-family: Arial, sans-serif;
line-height: 1.6;
margin: 20px;
background-color: #f4f4f4;
color: #333;
}
button {
display: block;
width: 20%;
padding: 10px;
background: #bc0ba8;
color: #fff;
border: none;
border-radius: 5px;
cursor: pointer;
font-size: 16px;
margin-top: 20px;
}
section {
background: #fff;
padding: 20px;
border-radius: 8px;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
}
button:not(:disabled):hover {
background: #5d0570;
}
div {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
}
</style>
</head>
<body>
<div>
<section>
<h1 id="caption">Incorrect! You selected the wrong letter.</h1>
<h3 id="info-text">Don't worry, you can try again!</h3>
</section>
<button id="end-trial">Restart</button>
</div>
</body>
<script>
var responses = JSON.parse(
jsPsych.data.get().last(1).select("responses").values
);
var controlLetter = jsPsych.data.get().last(1).select("controlLetter1")
.values[0];
var controlLetter2 = jsPsych.data.get().last(1).select("controlLetter2")
.values[0];
var controlLetter3 = jsPsych.data.get().last(1).select("controlLetter3")
.values[0];
if (responses.Q1 == controlLetter && responses.Q2 == controlLetter2 && responses.Q3 == controlLetter3) {
document.getElementById("caption").innerText = "Correct!";
document.getElementById("info-text").innerText =
"While searching for control letters, remember that rating the cloud quality is the top priority.";
document.getElementById("end-trial").innerText = "Let's go!";
} else {
document.getElementById("caption").innerText =
"Incorrect! You selected the wrong letter.";
document.getElementById("info-text").innerText =
"Don't worry, you can try again!";
document.getElementById("end-trial").innerText = "Restart";
}
</script>
</html>

74
PCSurvey/PCstatic/html/feedback_no_emphasis_quality.html Normal file
View File

@@ -0,0 +1,74 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
<style>
body {
font-family: Arial, sans-serif;
line-height: 1.6;
margin: 20px;
background-color: #f4f4f4;
color: #333;
}
button {
display: block;
width: 20%;
padding: 10px;
background: #bc0ba8;
color: #fff;
border: none;
border-radius: 5px;
cursor: pointer;
font-size: 16px;
margin-top: 20px;
}
section {
background: #fff;
padding: 20px;
border-radius: 8px;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
}
button:not(:disabled):hover {
background: #5d0570;
}
div {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
}
</style>
</head>
<body>
<div>
<section>
<h1 id="caption">Incorrect! You selected the wrong letter.</h1>
<h3 id="info-text">Don't worry, you can try again!</h3>
</section>
<button id="end-trial">Restart</button>
</div>
</body>
<script>
var responses = JSON.parse(
jsPsych.data.get().last(1).select("responses").values
);
var controlLetter = jsPsych.data.get().last(1).select("controlLetter1")
.values[0];
if (responses.Q1 == controlLetter) {
document.getElementById("caption").innerText = "Correct!";
document.getElementById("info-text").innerText =
"You selected the correct letter! Now you can proceed to the study.";
document.getElementById("end-trial").innerText = "Let's go!";
} else {
document.getElementById("caption").innerText =
"Incorrect! You selected the wrong letter.";
document.getElementById("info-text").innerText =
"Don't worry, you can try again!";
document.getElementById("end-trial").innerText = "Restart";
}
</script>
</html>

44
PCSurvey/PCstatic/html/instructions.html Normal file
View File

@@ -0,0 +1,44 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8"/>
<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0"/>
<meta http-equiv="X-UA-Compatible" content="ie=edge"/>
<!-- <link rel="stylesheet" href="https://use.typekit.net/hpq3bof.css">
<link href="https://fonts.googleapis.com/css?family=Lancelot" rel="stylesheet"> -->
</head>
<body>
<div id="intro_text">
<header>
<h1>Test Instructions</h1>
</header>
<main>
<section>
<h2>Your Task</h2>
<p>You will first see a picture in original quality (left).</p>
<div>
<img id="Bsp1" style="width:420px;height:280px;margin:10px" src="PCstatic/img/Text/Text-OR-G-E.png" />
<img id="Bsp2" style="width:420px;height:280px;margin:10px" src="PCstatic/img/Text/Text-OC-V8-G-H.png" />
</div>
<p>After that you see a picture of a reduced quality (right).</p>
<p>Your Task:</p>
<ul>
<li>Rate the quality of the picture.</li>
<ul>
<li><b>Good quality</b> is given if the surfaces of objects are smooth and easily recognisable.</li>
<li>A picture of <b>bad quality</b> has less recognisable surfaces.</li>
</ul>
<li>Rate the difference in quality between the original picture and the reduced picture.</li>
<li>In addition on each picture there will be a red letter in the top right corner. Memorize it and Tick/Check the corresponding box your rating.</li>
</ul>
<p></p>
<p>Further informations on the topic are at the end of the survey.</p>
</section>
</main>
</div>
<button type="jspsych-btn" id="consent">I agree to take part in this study.</button>
</body>
</html>
<!-- Cache served by Simple Cache - Last modified: Thu, 05 Jul 2018 02:27:42 GMT -->

150
PCSurvey/PCstatic/html/instructions_P0.html Normal file
View File

@@ -0,0 +1,150 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Point Clouds and VR: Research Introduction</title>
<style>
body {
font-family: Arial, sans-serif;
line-height: 1.6;
margin: 20px;
background-color: #f8f8f8;
color: #333;
}
section {
background: #fff;
padding: 20px;
border-radius: 4px;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
}
h1 {
font-size: 24px;
margin-bottom: 20px;
color: #333;
text-align: center;
border-bottom: 2px solid #333;
padding-bottom: 10px;
}
h2 {
font-size: 20px;
color: #444;
margin-top: 20px;
}
p {
margin-bottom: 10px;
}
img {
border: 1px solid #ccc;
display: block;
margin: 20px auto;
max-width: 100%;
height: auto;
}
button {
display: block;
width: 20%;
padding: 10px;
background: #bc0ba8;
color: #fff;
border: none;
border-radius: 5px;
cursor: pointer;
font-size: 16px;
margin-top: 20px;
margin-bottom: 50px;
}
button:disabled {
background: #ccc;
color: #666;
cursor: not-allowed;
}
button:not(:disabled):hover {
background: #5d0570;
}
div {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
}
.highlight {
background-color: #f0f0f0;
border-left: 4px solid #4a4a4a;
padding: 10px;
margin: 10px 0;
}
.important-note {
background-color: #e6e6e6;
border: 1px solid #4a4a4a;
border-radius: 3px;
padding: 15px;
margin-top: 20px;
font-weight: bold;
text-align: center;
}
</style>
</head>
<body>
<div>
<section>
<h1>Point Clouds and Virtual Reality: Essential Research Introduction</h1>
<div class="important-note">
Please read the following introduction as it can be helpful for understanding the research.
</div>
<h2>What is a Point Cloud?</h2>
<p>A point cloud is a set of data points in 3D space, typically representing the external surface of an object or environment. Each point has X, Y, and Z coordinates and may include additional information like color or intensity.</p>
<div class="highlight">
<strong>Key Features of Point Clouds:</strong>
<ul>
<li>Detailed 3D representation of objects and environments</li>
<li>Created using 3D scanners or LiDAR technology</li>
<li>Can contain millions of points for high-resolution models</li>
</ul>
</div>
<img src="PCstatic/img/pointcloud_example.png" alt="Point Cloud Visualization">
<h2>Connection to Virtual Reality (VR)</h2>
<p>Point clouds play a crucial role in creating immersive VR experiences by bridging the gap between physical and virtual worlds.</p>
<div class="highlight">
<strong>How Point Clouds Enhance VR:</strong>
<ul>
<li>Create detailed and accurate 3D models of real-world environments</li>
<li>Enable the generation of immersive VR experiences</li>
<li>Allow users to explore digitally recreated spaces</li>
<li>Provide a data-driven foundation for realistic environmental representations</li>
</ul>
</div>
<p>By utilizing point clouds in VR, researchers and developers can create highly realistic and interactive virtual environments, revolutionizing fields such as architecture, gaming, virtual tourism, and more.</p>
<p>Understanding these concepts is essential for delving into advanced research topics in 3D visualization, computer vision, and virtual reality applications.</p>
</section>
</div>
<button type="button" id="consent" disabled="true"></button>
</body>
<script>
var timerElement = document.getElementById('consent');
var timeLeft = 10;
var countdown = setInterval(() => {
if (timeLeft <= 0) {
clearInterval(countdown);
timerElement.textContent = "Continue";
timerElement.disabled = false;
} else {
timerElement.textContent = timeLeft;
timeLeft--;
}
}, 1000);
</script>
</html>

155
PCSurvey/PCstatic/html/instructions_P1.html Normal file
View File

@@ -0,0 +1,155 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Instructions</title>
<style>
body {
font-family: Arial, sans-serif;
line-height: 1.6;
margin: 20px;
background-color: #f4f4f4;
color: #333;
}
section {
background: #fff;
padding: 20px;
border-radius: 8px;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
text-align: left;
}
h1 {
font-size: 24px;
margin-bottom: 20px;
}
p {
margin-bottom: 10px;
}
img {
border: 2px solid black;
display: block;
margin: 20px auto;
max-width: 100%;
height: auto;
}
button {
display: block;
width: 20%;
padding: 10px;
background: #bc0ba8;
color: #fff;
border: none;
border-radius: 5px;
cursor: pointer;
margin: 20px auto; /* Zentriert den Button */
margin-bottom: 50px;
}
button:disabled {
background: #ccc;
color: #666;
cursor: not-allowed;
}
button:not(:disabled):hover {
background: #5d0570;
}
.highlight {
background-color: #f9e6f8;
border-left: 4px solid #bc0ba8;
padding: 10px;
margin: 15px 0;
}
.step {
background-color: #f9f9f9;
border: 1px solid #e0e0e0;
padding: 10px;
margin-bottom: 10px;
}
.step-number {
font-weight: bold;
color: #bc0ba8;
margin-right: 5px;
}
</style>
</head>
<body>
<div>
<section>
<h1>Research Experiment: Point Cloud Quality Evaluation</h1>
<div class="highlight">
<p><strong>Key Focus:</strong> Evaluate the <strong>QUALITY</strong> of point clouds in virtual reality environments.</p>
</div>
<h2>Experiment Structure</h2>
<p>You will participate in 4 blocks of evaluations. Each block consists of the following:</p>
<ol>
<li>Viewing and evaluating an initial point cloud</li>
<li>Viewing and evaluating a second point cloud</li>
<li>Rating the difference between the two point clouds</li>
</ol>
<h2>Your Task</h2>
<div class="step">
<span class="step-number">1.</span>
<span>You will be immersed in a point cloud environment.</span>
</div>
<div class="step">
<span class="step-number">2.</span>
<span>Explore the point cloud to familiarize yourself with it for later evaluation.</span>
</div>
<img width="640" height="360" src="PCstatic/img/pointcloud.png" alt="Point Cloud Image">
<div class="step">
<span class="step-number">3.</span>
<span>As a control measure, there are <b>three letters/numbers</b> hidden in the cloud which you must identify. You will be asked about it later during the evaluation.</span>
</div>
<img width="640" height="360" src="PCstatic/img/letter_pointcloud.png" alt="Letter Point Cloud Image">
<div class="step">
<span class="step-number">4.</span>
<span>Please rate the <b>quality</b> of the point cloud on a scale and enter the corresponding control <b>letters/numbers</b> that you observed.</span>
</div>
<img width="680" height="360" src="PCstatic/img/seq_1.png" alt="Rating Scale Image">
<div class="step">
<span class="step-number">5.</span>
<span>You will then experience a second point cloud.</span>
</div>
<div class="step">
<span class="step-number">6.</span>
<span>Repeat steps 2 and 3 for the new cloud, then rate its <b>quality</b>, enter the control <b>letters/numbers</b> from the cloud, and <b>assess the difference in quality</b> compared to the previous one.</span>
</div>
<img width="640" height="360" src="PCstatic/img/seq_2.png" alt="Different Compression Settings Image">
<div class="highlight">
<p><strong>Important:</strong> While finding the hidden letters/numbers is part of the mechanism to validate the interaction, the primary focus is on evaluating the overall quality of the point cloud.</p>
</div>
<p>This sequence of two point clouds and their evaluations will be repeated 4 times (4 blocks).</p>
<p>After completing all blocks, you will have the opportunity to provide feedback, which we greatly appreciate for further improvement of our research.</p>
<p>To help you familiarize yourself with the survey, you will complete a trial run beforehand.</p>
</section>
</div>
<button type="button" id="consent" disabled="true"></button>
</body>
<script>
var timerElement = document.getElementById('consent');
var timeLeft = 10;
var countdown = setInterval(() => {
if (timeLeft <= 0) {
clearInterval(countdown);
timerElement.textContent = "I Agree";
timerElement.disabled = false;
} else {
timerElement.textContent = timeLeft;
timeLeft--;
}
}, 1000);
</script>
</html>

151
PCSurvey/PCstatic/html/instructions_P1_no_ emphasis_quality.html Normal file
View File

@@ -0,0 +1,151 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Instructions</title>
<style>
body {
font-family: Arial, sans-serif;
line-height: 1.6;
margin: 20px;
background-color: #f4f4f4;
color: #333;
}
section {
background: #fff;
padding: 20px;
border-radius: 8px;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
text-align: left;
}
h1 {
font-size: 24px;
margin-bottom: 20px;
}
p {
margin-bottom: 10px;
}
img {
border: 2px solid black;
display: block;
margin: 20px auto;
max-width: 100%;
height: auto;
}
button {
display: block;
width: 20%;
padding: 10px;
background: #bc0ba8;
color: #fff;
border: none;
border-radius: 5px;
cursor: pointer;
margin: 20px auto; /* Zentriert den Button */
margin-bottom: 50px;
}
button:disabled {
background: #ccc;
color: #666;
cursor: not-allowed;
}
button:not(:disabled):hover {
background: #5d0570;
}
.highlight {
background-color: #f9e6f8;
border-left: 4px solid #bc0ba8;
padding: 10px;
margin: 15px 0;
}
.step {
background-color: #f9f9f9;
border: 1px solid #e0e0e0;
padding: 10px;
margin-bottom: 10px;
}
.step-number {
font-weight: bold;
color: #bc0ba8;
margin-right: 5px;
}
</style>
</head>
<body>
<div>
<section>
<h1>Research Experiment: Point Cloud Quality Evaluation</h1>
<div class="highlight">
<p><strong>Key Focus:</strong> Evaluate the <strong>QUALITY</strong> of point clouds in virtual reality environments.</p>
</div>
<h2>Experiment Structure</h2>
<p>You will participate in 4 blocks of evaluations. Each block consists of the following:</p>
<ol>
<li>Viewing and evaluating an initial point cloud</li>
<li>Viewing and evaluating a second point cloud</li>
<li>Rating the difference between the two point clouds</li>
</ol>
<h2>Your Task</h2>
<div class="step">
<span class="step-number">1.</span>
<span>You will be immersed in a point cloud environment.</span>
</div>
<div class="step">
<span class="step-number">2.</span>
<span>Explore the point cloud to familiarize yourself with it for later evaluation.</span>
</div>
<img width="640" height="360" src="PCstatic/img/pointcloud.png" alt="Point Cloud Image">
<div class="step">
<span class="step-number">3.</span>
<span>As a control measure, there are <b>one letter/number</b> hidden in the cloud which you must identify. You will be asked about it later during the evaluation.</span>
</div>
<img width="640" height="360" src="PCstatic/img/letter_pointcloud.png" alt="Letter Point Cloud Image">
<div class="step">
<span class="step-number">4.</span>
<span>Please rate the <b>quality</b> of the point cloud on a scale and enter the corresponding control <b>letter/number</b> that you observed.</span>
</div>
<img width="680" height="360" src="PCstatic/img/seq_1.png" alt="Rating Scale Image">
<div class="step">
<span class="step-number">5.</span>
<span>You will then experience a second point cloud.</span>
</div>
<div class="step">
<span class="step-number">6.</span>
<span>Repeat steps 2 and 3 for the new cloud, then rate its <b>quality</b>, enter the control <b>letter/number</b> from the cloud, and <b>assess the difference in quality</b> compared to the previous one.</span>
</div>
<img width="640" height="360" src="PCstatic/img/seq_2.png" alt="Different Compression Settings Image">
<p>This sequence of two point clouds and their evaluations will be repeated 4 times (4 blocks).</p>
<p>After completing all blocks, you will have the opportunity to provide feedback, which we greatly appreciate for further improvement of our research.</p>
<p>To help you familiarize yourself with the survey, you will complete a trial run beforehand.</p>
</section>
</div>
<button type="button" id="consent" disabled="true"></button>
</body>
<script>
var timerElement = document.getElementById('consent');
var timeLeft = 10;
var countdown = setInterval(() => {
if (timeLeft <= 0) {
clearInterval(countdown);
timerElement.textContent = "I Agree";
timerElement.disabled = false;
} else {
timerElement.textContent = timeLeft;
timeLeft--;
}
}, 1000);
</script>
</html>

109
PCSurvey/PCstatic/html/instructions_P2.html Normal file
View File

@@ -0,0 +1,109 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Instructions</title>
<style>
body {
font-family: Arial, sans-serif;
line-height: 1.6;
margin: 20px;
background-color: #f4f4f4;
color: #333;
}
section {
background: #fff;
padding: 20px;
border-radius: 8px;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
}
h1 {
font-size: 24px;
margin-bottom: 20px;
}
p, ul {
margin-bottom: 10px;
}
ul {
list-style-type: none;
padding-left: 20px;
}
ul li {
margin-bottom: 5px;
}
img {
border: 2px solid black;
display: block;
margin: 20px auto;
max-width: 100%;
height: auto;
}
button {
display: block;
width: auto;
padding: 10px 20px;
background: #bc0ba8;
color: #fff;
border: none;
border-radius: 5px;
cursor: pointer;
margin: 20px auto;
font-size: 16px;
margin-bottom: 50px;
}
button:disabled {
background: #ccc;
color: #666;
cursor: not-allowed;
}
button:not(:disabled):hover {
background: #5d0570;
}
div {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
}
</style>
</head>
<body>
<div>
<section>
<h1>Controls</h1>
<p>Hold the left mouse button and move the mouse to adjust your perspective.</p>
<img src="PCstatic/img/perspective.gif" width="640" height="640" alt="">
<p>Use the W, A, S, and D keys to change your position:</p>
<ul>
<li><b>W</b> - Move forward</li>
<li><b>S</b> - Move backward</li>
<li><b>D</b> - Move right</li>
<li><b>A</b> - Move left</li>
</ul>
<img src="PCstatic/img/position.gif" width="640" height="640" alt="">
<p>Combine mouse and keyboard controls to navigate through the cloud.</p>
<img src="PCstatic/img/movement.gif" width="640" height="640" alt="">
</section>
</div>
<button type="button" id="consent" disabled="true"></button>
</body>
<script>
var timerElement = document.getElementById('consent');
var timeLeft = 3;
var countdown = setInterval(() => {
if (timeLeft <= 0) {
clearInterval(countdown);
timerElement.textContent = "Let's try!";
timerElement.disabled = false;
} else {
timerElement.textContent = timeLeft;
timeLeft--;
}
}, 1000);
</script>
</html>

47
PCSurvey/PCstatic/html/instructions_V.html Normal file
View File

@@ -0,0 +1,47 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8"/>
<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0"/>
<meta http-equiv="X-UA-Compatible" content="ie=edge"/>
<!-- <link rel="stylesheet" href="https://use.typekit.net/hpq3bof.css">
<link href="https://fonts.googleapis.com/css?family=Lancelot" rel="stylesheet"> -->
</head>
<body>
<div id="intro_text">
<header>
<h1>Test Instructions</h1>
</header>
<main>
<section>
<h2>Your Task</h2>
<p>You will first see a video in original quality:</p>
<div style="block">
<img id="Bsp1" style="width:420px;height:280px;margin:10px" src="PCstatic/img/Text/Text-OR-G-E.png" />
</div>
<p>After that, you see the same video in reduced quality:</p>
<div style="block">
<img id="Bsp2" style="width:420px;height:280px;margin:10px" src="PCstatic/img/Text/Text-OC-V8-G-H.png" />
</div>
<p>Your Task:</p>
<ul class="instructions">
<li>Rate the quality of the videos.</li>
<ul class="insturcuions">
<li><b>Good quality</b> is given if the surfaces of objects are smooth and easily recognisable.</li>
<li>A video of <b>bad quality</b> has less recognisable surfaces.</li>
</ul>
<li>Rate the difference in quality between the original video and the reduced video.</li>
<li>Even in the original video you might see areas that are not fully scanned (Areas are missing e.g. a roof). This should not influence your rating!</li>
<li>In addition at the end of each video there will be a red letter in the top right corner. Memorize it and tick/check the corresponding box below your rating.</li>
</ul>
<p></p>
<p>Further informations on the topic are at the end of the survey.</p>
</section>
</main>
</div>
<button type="jspsych-btn" id="consent">I agree to take part in this study.</button>
</body>
</html>
<!-- Cache served by Simple Cache - Last modified: Thu, 05 Jul 2018 02:27:42 GMT -->

98
PCSurvey/PCstatic/html/welcome.html Normal file
View File

@@ -0,0 +1,98 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8"/>
<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0"/>
<meta http-equiv="X-UA-Compatible" content="ie=edge"/>
<style>
body {
font-family: Arial, sans-serif;
line-height: 1.6;
margin: 20px;
background-color: #f4f4f4;
color: #333;
}
section {
background: #fff;
padding: 20px;
border-radius: 8px;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
}
h2, h3 {
margin-bottom: 15px;
}
p, ul {
margin-bottom: 10px;
}
ul {
list-style-type: none;
padding-left: 20px;
}
ul li {
margin-bottom: 5px;
}
button {
display: block;
width: 20%;
padding: 10px;
background: #bc0ba8;
color: #fff;
border: none;
border-radius: 5px;
cursor: pointer;
font-size: 16px;
margin-top: 20px;
}
button:disabled {
background: #ccc;
color: #666;
cursor: not-allowed;
}
button:not(:disabled):hover {
background: #5d0570;
}
div {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
}
</style>
</head>
<body>
<div>
<section>
<h3>Thank you for your participation in this Survey.</h3>
<p>Before starting the survey, please read the test instructions on the next page carefully.</p>
<br>
<h1>Important!</h1>
<b>Please follow the following rules to ensure your participation is rated as successful:</b>
<ul>
<li>Please do <b>NOT Switch</b> tabs or programs during the test.</li>
<li>Please do <b>NOT Zoom</b> in or out during the test.</li>
<li>Please do <b>NOT Reload</b> the page once you have begun the test.</li>
</ul>
</section>
<button type="jspsych-btn" id="consent" disabled="true"></button>
</div>
</body>
<script>
var timerElement = document.getElementById('consent');
var timeLeft = 5;
var countdown = setInterval(() => {
if (timeLeft <= 0) {
clearInterval(countdown);
timerElement.textContent = "Continue";
timerElement.disabled = false;
} else {
timerElement.textContent = timeLeft;
timeLeft--;
}
}, 1000);
</script>
</html>