init
This commit is contained in:
Andreas Wilms
155
PCSurvey/PCstatic/html/instructions_P1.html
Normal file
155
PCSurvey/PCstatic/html/instructions_P1.html
Normal 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>
|
||||
Reference in New Issue
Block a user