Vielen Dank für die schnelle Hilfe!
Wie würde ich das dann genau berücksichtigen?
Aktuell sieht mein Code wie folgt aus:
<style>
body {
font-family: Arial, sans-serif;
line-height: 1.6;
margin: 0;
padding: 20px;
background-color: #f4f4f4;
}
.container {
background-color: #fff;
padding: 20px 30px;
border-radius: 8px;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
max-width: 800px;
margin: 20px auto;
text-align: left;
}
h2 {
font-size: 1.5em;
margin-bottom: 0.5em;
text-align: left;
}
p {
margin-bottom: 1em;
text-align: left;
}
.option-box {
border: 1px solid #000;
padding: 10px;
width: 100%;
height: 250px;
margin-bottom: 20px;
display: flex;
flex-direction: column;
align-items: flex-start;
justify-content: flex-start;
box-sizing: border-box;
}
.option-box h3 {
margin-top: 0;
text-align: left;
}
.option-box p {
margin-top: 5px;
margin-bottom: 20px;
text-align: left;
}
.option-table {
width: 100%;
border: none;
table-layout: fixed;
}
.option-table td {
width: 50%;
text-align: left;
vertical-align: top;
}
.default-option {
border: 3px solid #000;
}
.warning-box {
border: 2px solid red;
padding: 10px;
margin-bottom: 20px;
display: flex;
align-items: center;
}
.warning-icon {
margin-right: 10px;
color: red;
font-size: 24px;
}
.icon {
font-size: 24px;
margin-bottom: 10px;
}
.hidden {
display: none;
}
@media (max-width: 600px) {
.container {
padding: 10px 15px;
}
.option-box {
height: auto;
}
.option-table td {
display: block;
width: 100%;
margin-bottom: 20px;
}
}
</style>
<!-- Font Awesome CDN for icons -->
<link rel="stylesheet" href="
https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css">
<div class="container hidden" id="scenario1">
<h2>Scenario 1</h2>
<p>Please make a decision between the following two investment options. You will make this decision once and then receive the selected option for 10 consecutive periods.</p>
<table class="option-table">
<tr>
<td>
<div class="option-box">
<h3>Option A</h3>
<p><i class="fas fa-lock icon"></i></p>
<p>A safe investment where you invest €1000 that guarantees a return of 3.2% per annum.</p>
</div>
</td>
<td>
<div class="option-box">
<h3>Option B</h3>
<p><i class="fas fa-chart-line icon"></i></p>
<p>A risky investment where you invest €1000 that offers a potential return of 22% per annum, but with only a 50% probability. If the return does not occur, you will receive 85% back.</p>
</div>
</td>
</tr>
</table>
<p><strong>Which option do you choose?</strong></p>
<input type="radio" name="investment_choice1" value="A"> Option A<br>
<input type="radio" name="investment_choice1" value="B"> Option B
</div>
<div class="container hidden" id="scenario2">
<h2>Scenario 2</h2>
<p>Please make a decision between the following two investment options. You will make this decision once and then receive the selected option for 10 consecutive periods.</p>
<table class="option-table">
<tr>
<td>
<div class="option-box">
<h3>Option A</h3>
<p><i class="fas fa-lock icon"></i></p>
<p>A safe investment where you invest €1000 that guarantees a return of 3.2% per annum.</p>
</div>
</td>
<td>
<div class="option-box default-option">
<h3>Option B</h3>
<p><i class="fas fa-chart-line icon"></i></p>
<p>A risky investment where you invest €1000 that offers a potential return of 22% per annum, but with only a 50% probability. If the return does not occur, you will receive 85% back.</p>
</div>
</td>
</tr>
</table>
<p><strong>Which option do you choose?</strong></p>
<input type="radio" name="investment_choice2" value="A"> Option A<br>
<input type="radio" name="investment_choice2" value="B" checked> Option B
</div>
<div class="container hidden" id="scenario3">
<h2>Scenario 3</h2>
<p>Please make a decision between the following two investment options. You will make this decision once and then receive the selected option for 10 consecutive periods.</p>
<div class="warning-box">
<i class="fas fa-exclamation-triangle warning-icon"></i>
<div>
<p><em>Note: Loss aversion can cause us to weigh potential losses more heavily than equal gains.</em></p>
<p><em>You may fear taking risks.</em></p>
</div>
</div>
<table class="option-table">
<tr>
<td>
<div class="option-box">
<h3>Option A</h3>
<p><i class="fas fa-lock icon"></i></p>
<p>A safe investment where you invest €1000 that guarantees a return of 3.2% per annum.</p>
</div>
</td>
<td>
<div class="option-box">
<h3>Option B</h3>
<p><i class="fas fa-chart-line icon"></i></p>
<p>A risky investment where you invest €1000 that offers a potential return of 22% per annum, but with only a 50% probability. If the return does not occur, you will receive 85% back.</p>
</div>
</td>
</tr>
</table>
<p><strong>Which option do you choose?</strong></p>
<input type="radio" name="investment_choice3" value="A"> Option A<br>
<input type="radio" name="investment_choice3" value="B"> Option B
</div>
<script>
// Zufällige Gruppenzuweisung
function getRandomInt(min, max) {
min = Math.ceil(min);
max = Math.floor(max);
return Math.floor(Math.random() * (max - min + 1)) + min;
}
const groupAssignment = getRandomInt(1, 3);
// Antworten speichern
const responses = {};
function saveResponse(scenario, choice) {
responses[scenario] = choice;
console.log(`Saved response for ${scenario}: ${choice}`);
console.log(responses);
}
// Event Listener für die Radiobuttons hinzufügen
document.addEventListener('DOMContentLoaded', function() {
const radioButtons1 = document.querySelectorAll('input[name="investment_choice1"]');
const radioButtons2 = document.querySelectorAll('input[name="investment_choice2"]');
const radioButtons3 = document.querySelectorAll('input[name="investment_choice3"]');
radioButtons1.forEach(radio => {
radio.addEventListener('change', () => saveResponse('XY01_investment_choice1', radio.value));
});
radioButtons2.forEach(radio => {
radio.addEventListener('change', () => saveResponse('XY01_investment_choice2', radio.value));
});
radioButtons3.forEach(radio => {
radio.addEventListener('change', () => saveResponse('XY01_investment_choice3', radio.value));
});
if (groupAssignment === 1) {
document.getElementById('scenario1').classList.remove('hidden');
} else if (groupAssignment === 2) {
document.getElementById('scenario2').classList.remove('hidden');
} else if (groupAssignment === 3) {
document.getElementById('scenario3').classList.remove('hidden');
}
});
</script>
``