156 lines
5.3 KiB
HTML
156 lines
5.3 KiB
HTML
<!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>
|