Confronta il testo

Trova la differenza tra due file di testo

Real-time diff
Unified diff
Collapse lines
Highlight change
Syntax highlighting
Strumenti
Diffchecker Desktop icon
Diffchecker Desktop The most secure way to run Diffchecker. Get the Diffchecker Desktop app: your diffs never leave your computer!Get Desktop

main.html

Created Diff never expires
1 removal
Lines
Total
Removed
Words
Total
Removed
To continue using this feature, upgrade to
Diffchecker logo
Diffchecker Pro
457 lines
9 additions
Lines
Total
Added
Words
Total
Added
To continue using this feature, upgrade to
Diffchecker logo
Diffchecker Pro
463 lines
<!DOCTYPE html>
<!DOCTYPE html>
<html>
<html>
<head>
<head>
<meta charset="utf-8">
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Decision Making Experiment - Home Page</title>
<title>Decision Making Experiment - Home Page</title>
<script src="../static/js/nivturk-plugins.js" type="text/javascript"></script>
<script src="../static/js/nivturk-plugins.js" type="text/javascript"></script>
</head>
</head>
<style>
<style>


/* import fonts */
/* import fonts */
@import url('https://fonts.googleapis.com/css2?family=Roboto&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Roboto&display=swap');


body {
body {
margin: 0 0 0 0;
margin: 0 0 0 0;
font-family: 'Roboto', sans-serif;
font-family: 'Roboto', sans-serif;
background: hsla(210,8%,5%,.5);
background: hsla(210,8%,5%,.5);
}
}


a:link {
a:link {
text-decoration: none;
text-decoration: none;
}
}


/* ------------------------------ */
/* ------------------------------ */
/* Task screen CSS */
/* Task screen CSS */
/* ------------------------------ */
/* ------------------------------ */


/* Task display */
/* Task display */
.task-wrapper {
.task-wrapper {
width: 100vw;
width: 100vw;
height: 100vh;
height: 100vh;
padding: 0 0 0 0;
padding: 0 0 0 0;
}
}


.available-tasks {
.available-tasks {


/* Task grid position */
/* Task grid position */
position: absolute;
position: absolute;
left: 50%;
left: 50%;
top: 50%;
top: 50%;
transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
-webkit-transform: translate(-50%, -50%);
-webkit-transform: translate(-50%, -50%);


/* Task grid size */
/* Task grid size */
width: 1150px;
width: 1150px;
height: 450px;
height: 450px;


/* Task grid layout */
/* Task grid layout */
display: grid;
display: grid;
grid-template-columns: auto auto auto auto;
grid-template-columns: auto auto auto auto;
grid-template-rows: auto auto;
grid-template-rows: auto auto;
column-gap: 50px;
column-gap: 50px;
row-gap: 20px;
row-gap: 20px;
justify-content: center;
justify-content: center;
align-items: center;
align-items: center;


/* object styling */
/* object styling */
background: white;
background: white;
border-radius: 7px;
border-radius: 7px;


}
}


.available-tasks::before {
.available-tasks::before {


/* Instructions position */
/* Instructions position */
position: absolute;
position: absolute;
left: 50%;
left: 50%;
top: 0%;
top: 0%;
transform: translate(-50%, calc(-15px + -100%));
transform: translate(-50%, calc(-15px + -100%));
-webkit-transform: translate(-50%, calc(-15px + -100%));
-webkit-transform: translate(-50%, calc(-15px + -100%));


/* Instructions size */
/* Instructions size */
width: 100%;
width: 100%;


/* Instructions styling */
/* Instructions styling */
font-size: 17px;
font-size: 17px;
text-align: center;
text-align: center;
color: black;
color: black;


/* Instructions text */
/* Instructions text */
content: 'Click on the highlighted picture below to start the next task. \A Once you start, please finish the task in one sitting.';
content: 'Click on the highlighted picture below to start the next task. \A Once you start, please finish the task in one sitting.';
white-space: 'pre';
white-space: 'pre';
font-weight:bold;
font-weight:bold;
}
}


.task {
.task {


/* task position */
/* task position */
position: relative;
position: relative;


/* task size */
/* task size */
width: 200px;
width: 200px;
height: 150px;
height: 150px;


/* task layout */
/* task layout */
display: flex;
display: flex;
flex-direction: column;
flex-direction: column;
align-items: center;
align-items: center;


/* task styling */
/* task styling */
opacity: 0.8;
opacity: 0.8;


}
}


.task h3 {
.task h3 {
position: absolute;
position: absolute;
top: 0;
top: 0;
transform: translateY(calc(-100% - 3px));
transform: translateY(calc(-100% - 3px));
margin-block-start: 0;
margin-block-start: 0;
margin-block-end: 0;
margin-block-end: 0;
}
}


.task p {
.task p {
position: absolute;
position: absolute;
bottom: 0;
bottom: 0;
transform: translateY(calc(5px + 100%));
transform: translateY(calc(5px + 100%));
margin-block-start: 0;
margin-block-start: 0;
margin-block-end: 0;
margin-block-end: 0;
}
}


.task img {
.task img {


/* image position */
/* image position */
position: absolute;
position: absolute;
left: 50%;
left: 50%;
top: 50%;
top: 50%;
transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
-webkit-transform: translate(-50%, -50%);
-webkit-transform: translate(-50%, -50%);


/* image size */
/* image size */
object-fit: fill;
object-fit: fill;


}
}


.task img:first-of-type {
.task img:first-of-type {
border: 3px solid black;
border: 3px solid black;
border-radius: 8px;
border-radius: 8px;
box-sizing: border-box;
box-sizing: border-box;
border-radius: 8px;
border-radius: 8px;
}
}


/* Highlight current game on hover */
/* Highlight current game on hover */
.task[status="current"]:hover {
.task[status="current"]:hover {
opacity: 1.0;
opacity: 1.0;
}
}


/* Prevent access to previous / next games */
/* Prevent access to previous / next games */
.task[status="disabled"], .task[status="completed"] {
.task[status="disabled"], .task[status="completed"] {
opacity: 0.12;
opacity: 0.12;
cursor: not-allowed;
cursor: not-allowed;
}
}


/* Prevent access to previous / next games */
/* Prevent access to previous / next games */
.task[status="disabled"] img, .task[status="completed"] img {
.task[status="disabled"] img, .task[status="completed"] img {
filter: grayscale(100%);
filter: grayscale(100%);
-webkit-filter: grayscale(100%);
-webkit-filter: grayscale(100%);
pointer-events: none;
pointer-events: none;
}
}


/* Styling of disabled images */
/* Styling of disabled images */
.task[status="disabled"] p, .task[status="completed"] p, .task[status="disabled"] h3, .task[status="completed"] h3 {
.task[status="disabled"] p, .task[status="completed"] p, .task[status="disabled"] h3, .task[status="completed"] h3 {
color: #404040;
color: #404040;
}
}


/* Styling of disabled images */
/* Styling of disabled images */
.task[status="disabled"] img:first-of-type, .task[status="completed"] img:first-of-type {
.task[status="disabled"] img:first-of-type, .task[status="completed"] img:first-of-type {
border: 3px solid gray;
border: 3px solid gray;
}
}


/* Styling of lock / checkmark images */
/* Styling of lock / checkmark images */
.task[status="disabled"] img:nth-of-type(2), .task[status="completed"] img:nth-of-type(2) {
.task[status="disabled"] img:nth-of-type(2), .task[status="completed"] img:nth-of-type(2) {
opacity: 1;
opacity: 1;
}
}


.faq {
.faq {


/* FAQ position */
/* FAQ position */
position: absolute;
position: absolute;
left: calc(50% - 375px);
left: calc(50% - 375px);
top: calc(50% + 230px);
top: calc(50% + 230px);


/* FAQ size */
/* FAQ size */
width: 750px;
width: 750px;


}
}


details[open] {
details[open] {
background-color: white;
background-color: white;
border-radius: 7px;
border-radius: 7px;
}
}


details[open] > summary {
details[open] > summary {
border-bottom: 1px solid silver;
border-bottom: 1px solid silver;
}
}


details p {
details p {
padding-left: 27px;
padding-left: 27px;
text-indent: -10px;
text-indent: -10px;
line-height: 1.6;
line-height: 1.6;
}
}


details summary:hover {
details summary:hover {
cursor: help;
cursor: help;
}
}


/* ------------------------------ */
/* ------------------------------ */
/* Success screen CSS */
/* Success screen CSS */
/* ------------------------------ */
/* ------------------------------ */


/* Completion screen */
/* Completion screen */
.success {
.success {
width: 100vw;
width: 100vw;
height: 100vh;
height: 100vh;
background: hsla(210,8%,5%,.5);
background: hsla(210,8%,5%,.5);
padding: 0 0 0 0;
padding: 0 0 0 0;
}
}


.bg-confetti-animated {
.bg-confetti-animated {


/* object position */
/* object position */
position: absolute;
position: absolute;
left: 50%;
left: 50%;
top: 50%;
top: 50%;
transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
-webkit-transform: translate(-50%, -50%);
-webkit-transform: translate(-50%, -50%);


/* object size */
/* object size */
width: 600px;
width: 600px;
height: 300px;
height: 300px;


/* object layout */
/* object layout */
display: flex;
display: flex;
flex-direction: column;
flex-direction: column;
align-items: center;
align-items: center;
justify-content: center;
justify-content: center;
line-height: 36px;
line-height: 36px;


/* object styling */
/* object styling */
background: white;
background: white;
border-radius: 7px;
border-radius: 7px;


/* confetti styling */
/* confetti styling */
/* https://stackoverflow.blog/2021/05/31/shipping-confetti-to-stack-overflows-design-system/ */
/* https://stackoverflow.blog/2021/05/31/shipping-confetti-to-stack-overflows-design-system/ */
background-repeat: repeat-x;
background-repeat: repeat-x;
background-position: top -10px center;
background-position: top -10px center;
background-image: url("data:image/svg+xml,%3Csvg width='600' height='90' viewBox='0 0 600 90' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Crect x='42' y='-10' width='6' height='10'/%3E%3Crect x='84' y='-10' width='6' height='10'/%3E%3Crect x='126' y='-13' width='5' height='13'/%3E%3Crect x='168' y='-13' width='5' height='13'/%3E%3Crect x='210' y='-10' width='6' height='10'/%3E%3Crect x='252' y='-13' width='5' height='13'/%3E%3Crect x='294' y='-10' width='6' height='10'/%3E%3Crect x='336' y='-13' width='5' height='13'/%3E%3Crect x='378' y='-13' width='5' height='13'/%3E%3Crect x='420' y='-10' width='6' height='10'/%3E%3Crect x='462' y='-10' width='6' height='10'/%3E%3Crect x='504' y='-13' width='5' height='13'/%3E%3Crect x='546' y='-10' width='6' height='10'/%3E%3Cstyle type='text/css'%3E rect %7B opacity: 0; %7D rect:nth-child(1) %7B transform-origin: 45px 5px; transform: rotate(-145deg); animation: blast 700ms infinite ease-out; animation-delay: 88ms; animation-duration: 631ms; %7D rect:nth-child(2) %7B transform-origin: 87px 5px; transform: rotate(164deg); animation: blast 700ms infinite ease-out; animation-delay: 131ms; animation-duration: 442ms; %7D rect:nth-child(3) %7B transform-origin: 128px 6px; transform: rotate(4deg); animation: blast 700ms infinite ease-out; animation-delay: 92ms; animation-duration: 662ms; %7D rect:nth-child(4) %7B transform-origin: 170px 6px; transform: rotate(-175deg); animation: blast 700ms infinite ease-out; animation-delay: 17ms; animation-duration: 593ms; %7D rect:nth-child(5) %7B transform-origin: 213px 5px; transform: rotate(-97deg); animation: blast 700ms infinite ease-out; animation-delay: 122ms; animation-duration: 476ms; %7D rect:nth-child(6) %7B transform-origin: 255px 6px; transform: rotate(57deg); animation: blast 700ms infinite ease-out; animation-delay: 271ms; animation-duration: 381ms; %7D rect:nth-child(7) %7B transform-origin: 297px 5px; transform: rotate(-46deg); animation: blast 700ms infinite ease-out; animation-delay: 131ms; animation-duration: 619ms; %7D rect:nth-child(8) %7B transform-origin: 338px 6px; transform: rotate(-65deg); animation: blast 700ms infinite ease-out; animation-delay: 85ms; animation-duration: 668ms; %7D rect:nth-child(9) %7B transform-origin: 380px 6px; transform: rotate(13deg); animation: blast 700ms infinite ease-out; animation-delay: 128ms; animation-duration: 377ms; %7D rect:nth-child(10) %7B transform-origin: 423px 5px; transform: rotate(176deg); animation: blast 700ms infinite ease-out; animation-delay: 311ms; animation-duration: 508ms; %7D rect:nth-child(11) %7B transform-origin: 465px 5px; transform: rotate(108deg); animation: blast 700ms infinite ease-out; animation-delay: 108ms; animation-duration: 595ms; %7D rect:nth-child(12) %7B transform-origin: 506px 6px; transform: rotate(62deg); animation: blast 700ms infinite ease-out; animation-delay: 105ms; animation-duration: 375ms; %7D rect:nth-child(13) %7B transform-origin: 549px 5px; transform: rotate(16deg); animation: blast 700ms infinite ease-out; animation-delay: 149ms; animation-duration: 491ms; %7D rect:nth-child(odd) %7B fill: %2365BB5C; %7D rect:nth-child(even) %7B z-index: 1; fill: %2333AAFF; %7D rect:nth-child(4n) %7B animation-duration: 1400ms; fill: %23F23B14; %7D rect:nth-child(3n) %7B animation-duration: 1750ms; animation-delay: 700ms; %7D rect:nth-child(4n-7) %7B fill: %232A2F6A; %7D rect:nth-child(6n) %7B fill: %23FBBA23; %7D @keyframes blast %7B from %7B opacity: 0; %7D 20%25 %7B opacity: 1; %7D to %7B transform: translateY(90px); %7D %7D %3C/style%3E%3C/svg%3E%0A");
background-image: url("data:image/svg+xml,%3Csvg width='600' height='90' viewBox='0 0 600 90' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Crect x='42' y='-10' width='6' height='10'/%3E%3Crect x='84' y='-10' width='6' height='10'/%3E%3Crect x='126' y='-13' width='5' height='13'/%3E%3Crect x='168' y='-13' width='5' height='13'/%3E%3Crect x='210' y='-10' width='6' height='10'/%3E%3Crect x='252' y='-13' width='5' height='13'/%3E%3Crect x='294' y='-10' width='6' height='10'/%3E%3Crect x='336' y='-13' width='5' height='13'/%3E%3Crect x='378' y='-13' width='5' height='13'/%3E%3Crect x='420' y='-10' width='6' height='10'/%3E%3Crect x='462' y='-10' width='6' height='10'/%3E%3Crect x='504' y='-13' width='5' height='13'/%3E%3Crect x='546' y='-10' width='6' height='10'/%3E%3Cstyle type='text/css'%3E rect %7B opacity: 0; %7D rect:nth-child(1) %7B transform-origin: 45px 5px; transform: rotate(-145deg); animation: blast 700ms infinite ease-out; animation-delay: 88ms; animation-duration: 631ms; %7D rect:nth-child(2) %7B transform-origin: 87px 5px; transform: rotate(164deg); animation: blast 700ms infinite ease-out; animation-delay: 131ms; animation-duration: 442ms; %7D rect:nth-child(3) %7B transform-origin: 128px 6px; transform: rotate(4deg); animation: blast 700ms infinite ease-out; animation-delay: 92ms; animation-duration: 662ms; %7D rect:nth-child(4) %7B transform-origin: 170px 6px; transform: rotate(-175deg); animation: blast 700ms infinite ease-out; animation-delay: 17ms; animation-duration: 593ms; %7D rect:nth-child(5) %7B transform-origin: 213px 5px; transform: rotate(-97deg); animation: blast 700ms infinite ease-out; animation-delay: 122ms; animation-duration: 476ms; %7D rect:nth-child(6) %7B transform-origin: 255px 6px; transform: rotate(57deg); animation: blast 700ms infinite ease-out; animation-delay: 271ms; animation-duration: 381ms; %7D rect:nth-child(7) %7B transform-origin: 297px 5px; transform: rotate(-46deg); animation: blast 700ms infinite ease-out; animation-delay: 131ms; animation-duration: 619ms; %7D rect:nth-child(8) %7B transform-origin: 338px 6px; transform: rotate(-65deg); animation: blast 700ms infinite ease-out; animation-delay: 85ms; animation-duration: 668ms; %7D rect:nth-child(9) %7B transform-origin: 380px 6px; transform: rotate(13deg); animation: blast 700ms infinite ease-out; animation-delay: 128ms; animation-duration: 377ms; %7D rect:nth-child(10) %7B transform-origin: 423px 5px; transform: rotate(176deg); animation: blast 700ms infinite ease-out; animation-delay: 311ms; animation-duration: 508ms; %7D rect:nth-child(11) %7B transform-origin: 465px 5px; transform: rotate(108deg); animation: blast 700ms infinite ease-out; animation-delay: 108ms; animation-duration: 595ms; %7D rect:nth-child(12) %7B transform-origin: 506px 6px; transform: rotate(62deg); animation: blast 700ms infinite ease-out; animation-delay: 105ms; animation-duration: 375ms; %7D rect:nth-child(13) %7B transform-origin: 549px 5px; transform: rotate(16deg); animation: blast 700ms infinite ease-out; animation-delay: 149ms; animation-duration: 491ms; %7D rect:nth-child(odd) %7B fill: %2365BB5C; %7D rect:nth-child(even) %7B z-index: 1; fill: %2333AAFF; %7D rect:nth-child(4n) %7B animation-duration: 1400ms; fill: %23F23B14; %7D rect:nth-child(3n) %7B animation-duration: 1750ms; animation-delay: 700ms; %7D rect:nth-child(4n-7) %7B fill: %232A2F6A; %7D rect:nth-child(6n) %7B fill: %23FBBA23; %7D @keyframes blast %7B from %7B opacity: 0; %7D 20%25 %7B opacity: 1; %7D to %7B transform: translateY(90px); %7D %7D %3C/style%3E%3C/svg%3E%0A");


@media (prefers-reduced-motion) {
@media (prefers-reduced-motion) {
background-image: url("data:image/svg+xml,%3Csvg width='574' height='60' viewBox='0 0 574 60' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Crect opacity='0.8' x='27.1224' y='20.0458' width='5' height='13' transform='rotate(-139 27.1224 20.0458)' fill='%23F23B14'/%3E%3Crect opacity='0.8' x='118.478' y='7.00201' width='5' height='13' transform='rotate(-38.8114 118.478 7.00201)' fill='%23FBBA23'/%3E%3Crect opacity='0.8' x='504.616' y='25.4479' width='5' height='13' transform='rotate(-60.2734 504.616 25.4479)' fill='%23F23B14'/%3E%3Crect opacity='0.6' x='538.983' y='45.555' width='5' height='13' transform='rotate(16.7826 538.983 45.555)' fill='%232A2F6A'/%3E%3Crect opacity='0.3' x='470.322' y='2.63625' width='5' height='13' transform='rotate(11.295 470.322 2.63625)' fill='%2333AAFF'/%3E%3Crect opacity='0.3' x='190.295' y='4.58138' width='5' height='13' transform='rotate(27.5954 190.295 4.58138)' fill='%23F23B14'/%3E%3Crect opacity='0.8' x='234.303' y='16.3233' width='5' height='13' transform='rotate(-41.8233 234.303 16.3233)' fill='%2365BB5C'/%3E%3Crect opacity='0.6' x='369.702' y='40.9875' width='5' height='13' transform='rotate(-56.419 369.702 40.9875)' fill='%2333AAFF'/%3E%3Crect opacity='0.3' x='402.121' y='31.0848' width='5' height='13' transform='rotate(-17.9234 402.121 31.0848)' fill='%23F23B14'/%3E%3Crect opacity='0.6' x='200.316' y='31.9328' width='5' height='13' transform='rotate(-15.8896 200.316 31.9328)' fill='%232A2F6A'/%3E%3Crect opacity='0.6' x='69.6745' y='23.4725' width='6' height='10' transform='rotate(70.0266 69.6745 23.4725)' fill='%2365BB5C'/%3E%3Crect opacity='0.6' x='291.945' y='7.16931' width='6' height='10' transform='rotate(30.4258 291.945 7.16931)' fill='%23FBBA23'/%3E%3Crect opacity='0.3' x='33.7754' y='38.2208' width='6' height='10' transform='rotate(38.6056 33.7754 38.2208)' fill='%23FBBA23'/%3E%3Crect opacity='0.8' x='109.752' y='31.1743' width='6' height='10' transform='rotate(28.5296 109.752 31.1743)' fill='%2333AAFF'/%3E%3Crect opacity='0.3' x='278.081' y='37.8695' width='6' height='10' transform='rotate(-26.5651 278.081 37.8695)' fill='%23F23B14'/%3E%3Crect opacity='0.8' x='416.294' y='11.5573' width='6' height='10' transform='rotate(-22.8498 416.294 11.5573)' fill='%23FBBA23'/%3E%3Crect opacity='0.3' x='354.667' y='9.32341' width='6' height='10' transform='rotate(17.7506 354.667 9.32341)' fill='%232A2F6A'/%3E%3Crect opacity='0.8' x='532.404' y='16.6372' width='6' height='10' transform='rotate(-75.3432 532.404 16.6372)' fill='%23FBBA23'/%3E%3Crect opacity='0.6' x='460.463' y='39.3557' width='6' height='10' transform='rotate(45.4982 460.463 39.3557)' fill='%2365BB5C'/%3E%3C/svg%3E");
background-image: url("data:image/svg+xml,%3Csvg width='574' height='60' viewBox='0 0 574 60' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Crect opacity='0.8' x='27.1224' y='20.0458' width='5' height='13' transform='rotate(-139 27.1224 20.0458)' fill='%23F23B14'/%3E%3Crect opacity='0.8' x='118.478' y='7.00201' width='5' height='13' transform='rotate(-38.8114 118.478 7.00201)' fill='%23FBBA23'/%3E%3Crect opacity='0.8' x='504.616' y='25.4479' width='5' height='13' transform='rotate(-60.2734 504.616 25.4479)' fill='%23F23B14'/%3E%3Crect opacity='0.6' x='538.983' y='45.555' width='5' height='13' transform='rotate(16.7826 538.983 45.555)' fill='%232A2F6A'/%3E%3Crect opacity='0.3' x='470.322' y='2.63625' width='5' height='13' transform='rotate(11.295 470.322 2.63625)' fill='%2333AAFF'/%3E%3Crect opacity='0.3' x='190.295' y='4.58138' width='5' height='13' transform='rotate(27.5954 190.295 4.58138)' fill='%23F23B14'/%3E%3Crect opacity='0.8' x='234.303' y='16.3233' width='5' height='13' transform='rotate(-41.8233 234.303 16.3233)' fill='%2365BB5C'/%3E%3Crect opacity='0.6' x='369.702' y='40.9875' width='5' height='13' transform='rotate(-56.419 369.702 40.9875)' fill='%2333AAFF'/%3E%3Crect opacity='0.3' x='402.121' y='31.0848' width='5' height='13' transform='rotate(-17.9234 402.121 31.0848)' fill='%23F23B14'/%3E%3Crect opacity='0.6' x='200.316' y='31.9328' width='5' height='13' transform='rotate(-15.8896 200.316 31.9328)' fill='%232A2F6A'/%3E%3Crect opacity='0.6' x='69.6745' y='23.4725' width='6' height='10' transform='rotate(70.0266 69.6745 23.4725)' fill='%2365BB5C'/%3E%3Crect opacity='0.6' x='291.945' y='7.16931' width='6' height='10' transform='rotate(30.4258 291.945 7.16931)' fill='%23FBBA23'/%3E%3Crect opacity='0.3' x='33.7754' y='38.2208' width='6' height='10' transform='rotate(38.6056 33.7754 38.2208)' fill='%23FBBA23'/%3E%3Crect opacity='0.8' x='109.752' y='31.1743' width='6' height='10' transform='rotate(28.5296 109.752 31.1743)' fill='%2333AAFF'/%3E%3Crect opacity='0.3' x='278.081' y='37.8695' width='6' height='10' transform='rotate(-26.5651 278.081 37.8695)' fill='%23F23B14'/%3E%3Crect opacity='0.8' x='416.294' y='11.5573' width='6' height='10' transform='rotate(-22.8498 416.294 11.5573)' fill='%23FBBA23'/%3E%3Crect opacity='0.3' x='354.667' y='9.32341' width='6' height='10' transform='rotate(17.7506 354.667 9.32341)' fill='%232A2F6A'/%3E%3Crect opacity='0.8' x='532.404' y='16.6372' width='6' height='10' transform='rotate(-75.3432 532.404 16.6372)' fill='%23FBBA23'/%3E%3Crect opacity='0.6' x='460.463' y='39.3557' width='6' height='10' transform='rotate(45.4982 460.463 39.3557)' fill='%2365BB5C'/%3E%3C/svg%3E");
}
}


}
}


.bg-confetti-animated h2 {
.bg-confetti-animated h2 {
font-size: 24px;
font-size: 24px;
margin-block-start: 0;
margin-block-start: 0;
margin-block-end: 12px;
margin-block-end: 12px;
}
}


.bg-confetti-animated p {
.bg-confetti-animated p {
font-size: 18px;
font-size: 18px;
margin-block-start: 0;
margin-block-start: 0;
margin-block-end: 0;
margin-block-end: 0;
}
}


.bg-confetti-static {
.bg-confetti-static {
background-repeat: repeat-x;
background-repeat: repeat-x;
background-position: top -10px center;
background-position: top -10px center;
background-image: url("data:image/svg+xml,%3Csvg width='574' height='60' viewBox='0 0 574 60' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Crect opacity='0.8' x='27.1224' y='20.0458' width='5' height='13' transform='rotate(-139 27.1224 20.0458)' fill='%23F23B14'/%3E%3Crect opacity='0.8' x='118.478' y='7.00201' width='5' height='13' transform='rotate(-38.8114 118.478 7.00201)' fill='%23FBBA23'/%3E%3Crect opacity='0.8' x='504.616' y='25.4479' width='5' height='13' transform='rotate(-60.2734 504.616 25.4479)' fill='%23F23B14'/%3E%3Crect opacity='0.6' x='538.983' y='45.555' width='5' height='13' transform='rotate(16.7826 538.983 45.555)' fill='%232A2F6A'/%3E%3Crect opacity='0.3' x='470.322' y='2.63625' width='5' height='13' transform='rotate(11.295 470.322 2.63625)' fill='%2333AAFF'/%3E%3Crect opacity='0.3' x='190.295' y='4.58138' width='5' height='13' transform='rotate(27.5954 190.295 4.58138)' fill='%23F23B14'/%3E%3Crect opacity='0.8' x='234.303' y='16.3233' width='5' height='13' transform='rotate(-41.8233 234.303 16.3233)' fill='%2365BB5C'/%3E%3Crect opacity='0.6' x='369.702' y='40.9875' width='5' height='13' transform='rotate(-56.419 369.702 40.9875)' fill='%2333AAFF'/%3E%3Crect opacity='0.3' x='402.121' y='31.0848' width='5' height='13' transform='rotate(-17.9234 402.121 31.0848)' fill='%23F23B14'/%3E%3Crect opacity='0.6' x='200.316' y='31.9328' width='5' height='13' transform='rotate(-15.8896 200.316 31.9328)' fill='%232A2F6A'/%3E%3Crect opacity='0.6' x='69.6745' y='23.4725' width='6' height='10' transform='rotate(70.0266 69.6745 23.4725)' fill='%2365BB5C'/%3E%3Crect opacity='0.6' x='291.945' y='7.16931' width='6' height='10' transform='rotate(30.4258 291.945 7.16931)' fill='%23FBBA23'/%3E%3Crect opacity='0.3' x='33.7754' y='38.2208' width='6' height='10' transform='rotate(38.6056 33.7754 38.2208)' fill='%23FBBA23'/%3E%3Crect opacity='0.8' x='109.752' y='31.1743' width='6' height='10' transform='rotate(28.5296 109.752 31.1743)' fill='%2333AAFF'/%3E%3Crect opacity='0.3' x='278.081' y='37.8695' width='6' height='10' transform='rotate(-26.5651 278.081 37.8695)' fill='%23F23B14'/%3E%3Crect opacity='0.8' x='416.294' y='11.5573' width='6' height='10' transform='rotate(-22.8498 416.294 11.5573)' fill='%23FBBA23'/%3E%3Crect opacity='0.3' x='354.667' y='9.32341' width='6' height='10' transform='rotate(17.7506 354.667 9.32341)' fill='%232A2F6A'/%3E%3Crect opacity='0.8' x='532.404' y='16.6372' width='6' height='10' transform='rotate(-75.3432 532.404 16.6372)' fill='%23FBBA23'/%3E%3Crect opacity='0.6' x='460.463' y='39.3557' width='6' height='10' transform='rotate(45.4982 460.463 39.3557)' fill='%2365BB5C'/%3E%3C/svg%3E");
background-image: url("data:image/svg+xml,%3Csvg width='574' height='60' viewBox='0 0 574 60' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Crect opacity='0.8' x='27.1224' y='20.0458' width='5' height='13' transform='rotate(-139 27.1224 20.0458)' fill='%23F23B14'/%3E%3Crect opacity='0.8' x='118.478' y='7.00201' width='5' height='13' transform='rotate(-38.8114 118.478 7.00201)' fill='%23FBBA23'/%3E%3Crect opacity='0.8' x='504.616' y='25.4479' width='5' height='13' transform='rotate(-60.2734 504.616 25.4479)' fill='%23F23B14'/%3E%3Crect opacity='0.6' x='538.983' y='45.555' width='5' height='13' transform='rotate(16.7826 538.983 45.555)' fill='%232A2F6A'/%3E%3Crect opacity='0.3' x='470.322' y='2.63625' width='5' height='13' transform='rotate(11.295 470.322 2.63625)' fill='%2333AAFF'/%3E%3Crect opacity='0.3' x='190.295' y='4.58138' width='5' height='13' transform='rotate(27.5954 190.295 4.58138)' fill='%23F23B14'/%3E%3Crect opacity='0.8' x='234.303' y='16.3233' width='5' height='13' transform='rotate(-41.8233 234.303 16.3233)' fill='%2365BB5C'/%3E%3Crect opacity='0.6' x='369.702' y='40.9875' width='5' height='13' transform='rotate(-56.419 369.702 40.9875)' fill='%2333AAFF'/%3E%3Crect opacity='0.3' x='402.121' y='31.0848' width='5' height='13' transform='rotate(-17.9234 402.121 31.0848)' fill='%23F23B14'/%3E%3Crect opacity='0.6' x='200.316' y='31.9328' width='5' height='13' transform='rotate(-15.8896 200.316 31.9328)' fill='%232A2F6A'/%3E%3Crect opacity='0.6' x='69.6745' y='23.4725' width='6' height='10' transform='rotate(70.0266 69.6745 23.4725)' fill='%2365BB5C'/%3E%3Crect opacity='0.6' x='291.945' y='7.16931' width='6' height='10' transform='rotate(30.4258 291.945 7.16931)' fill='%23FBBA23'/%3E%3Crect opacity='0.3' x='33.7754' y='38.2208' width='6' height='10' transform='rotate(38.6056 33.7754 38.2208)' fill='%23FBBA23'/%3E%3Crect opacity='0.8' x='109.752' y='31.1743' width='6' height='10' transform='rotate(28.5296 109.752 31.1743)' fill='%2333AAFF'/%3E%3Crect opacity='0.3' x='278.081' y='37.8695' width='6' height='10' transform='rotate(-26.5651 278.081 37.8695)' fill='%23F23B14'/%3E%3Crect opacity='0.8' x='416.294' y='11.5573' width='6' height='10' transform='rotate(-22.8498 416.294 11.5573)' fill='%23FBBA23'/%3E%3Crect opacity='0.3' x='354.667' y='9.32341' width='6' height='10' transform='rotate(17.7506 354.667 9.32341)' fill='%232A2F6A'/%3E%3Crect opacity='0.8' x='532.404' y='16.6372' width='6' height='10' transform='rotate(-75.3432 532.404 16.6372)' fill='%23FBBA23'/%3E%3Crect opacity='0.6' x='460.463' y='39.3557' width='6' height='10' transform='rotate(45.4982 460.463 39.3557)' fill='%2365BB5C'/%3E%3C/svg%3E");
}
}


</style>
</style>
<body>
<body>
</body>
</body>
<script>
<script>



//---------------------------------------//
//---------------------------------------//
// Define variables
// Define variables
//---------------------------------------//
//---------------------------------------//


// Define current stage.
// Define current stage.
const current_stage = parseInt({{stage}}); // this might only work when hosting online, replace with 0-3 to run individual tasks - deepta
const current_stage = parseInt('{{stage}}'); // this might only work when hosting online, replace with 0-3 to run individual tasks - deepta


// Define order index.
// Define order index.
// NOTE: fixed order by task elements.
// NOTE: fixed order by task elements.
// const ix = parseInt({{ix}});
// const ix = parseInt({{ix}});
const ix = 0;
const ix = 0;


//---------------------------------------//
//---------------------------------------//
// Define permutations
// Define permutations
//---------------------------------------//
//---------------------------------------//
// Q: Really Sam? Hard-coding permutations?
// Q: Really Sam? Hard-coding permutations?
// A: Pls leave me alone.
// A: Pls leave me alone.


// Define all possible orders.
// Define all possible orders.
// const orders = [
// const orders = [
// [0, 1, 2, 3, 4, 5],
// [0, 1, 2, 3, 4, 5],
// [0, 1, 2, 3, 5, 4],
// [0, 1, 2, 3, 5, 4],
// [0, 1, 2, 4, 3, 5],
// [0, 1, 2, 4, 3, 5],
// [0, 1, 2, 4, 5, 3],
// [0, 1, 2, 4, 5, 3],
// [0, 1, 2, 5, 3, 4],
// [0, 1, 2, 5, 3, 4],
// [0, 1, 2, 5, 4, 3],
// [0, 1, 2, 5, 4, 3],
// [0, 1, 3, 2, 4, 5],
// [0, 1, 3, 2, 4, 5],
// [0, 1, 3, 2, 5, 4],
// [0, 1, 3, 2, 5, 4],
// [0, 1, 3, 4, 2, 5],
// [0, 1, 3, 4, 2, 5],
// [0, 1, 3, 4, 5, 2],
// [0, 1, 3, 4, 5, 2],
// [0, 1, 3, 5, 2, 4],
// [0, 1, 3, 5, 2, 4],
// [0, 1, 3, 5, 4, 2],
// [0, 1, 3, 5, 4, 2],
// [0, 1, 4, 2, 3, 5],
// [0, 1, 4, 2, 3, 5],
// [0, 1, 4, 2, 5, 3],
// [0, 1, 4, 2, 5, 3],
// [0, 1, 4, 3, 2, 5],
// [0, 1, 4, 3, 2, 5],
// [0, 1, 4, 3, 5, 2],
// [0, 1, 4, 3, 5, 2],
// [0, 1, 4, 5, 2, 3],
// [0, 1, 4, 5, 2, 3],
// [0, 1, 4, 5, 3, 2],
// [0, 1, 4, 5, 3, 2],
// [0, 1, 5, 2, 3, 4],
// [0, 1, 5, 2, 3, 4],
// [0, 1, 5, 2, 4, 3],
// [0, 1, 5, 2, 4, 3],
// [0, 1, 5, 3, 2, 4],
// [0, 1, 5, 3, 2, 4],
// [0, 1, 5, 3, 4, 2],
// [0, 1, 5, 3, 4, 2],
// [0, 1, 5, 4, 2, 3],
// [0, 1, 5, 4, 2, 3],
// [0, 1, 5, 4, 3, 2],
// [0, 1, 5, 4, 3, 2],
// ];
// ];
const orders = [[0,1,2]];
const orders = [[0,1,2]];


// Define order (for current participant).
// Define order (for current participant).
const order = orders[ix];
const order = orders[ix];


// Define experiments.
// Define experiments.
//const experiments = order.map(i => ['effort', 'risk','acqext','recovery'][i]);
//const experiments = order.map(i => ['effort', 'risk','acqext','recovery'][i]);
const experiments = order.map(i => ['acqext','risk','recovery'][i]);
// const experiments = order.map(i => ['acqext','risk','recovery'][i]);
const experiments = order.map(i => ['acqext','stop','recovery'][i]);


// Debugging stages
console.log("Current stage:", current_stage);
console.log("Experiments array:", experiments);
console.log("Should redirect to:", experiments[current_stage]);


// Define experiment names.
// Define experiment names.
const titles = order.map(i => [
const titles = order.map(i => [
'Task 1',
'Task 1',
'Task 2',
'Task 2',
'Task 3'
'Task 3'
][i]);
][i]);


// Define experiment times.
// Define experiment times.
//const times = order.map(i => [22, 18, 15, 10][i]);
//const times = order.map(i => [22, 18, 15, 10][i]);
const times = order.map(i => [15, 15, 10][i]); // time and update this bit - deepta
const times = order.map(i => [15, 15, 10][i]); // time and update this bit - deepta


//---------------------------------------//
//---------------------------------------//
// Define HTML
// Define HTML
//---------------------------------------//
//---------------------------------------//


// Initialize HTML
// Initialize HTML
var new_html = '';
var new_html = '';
// Case 1: All tasks completed
// Case 1: All tasks completed
if (current_stage >= order.length) {
if (current_stage >= order.length) {
// draw background
// draw background
new_html += '<div class="success">';
new_html += '<div class="success">';


// draw container
// draw container
new_html += '<div class="bg-confetti-animated">';
new_html += '<div class="bg-confetti-animated">';


// draw message
// draw message
// new_html += "<h2>You're done!</h2>";
// new_html += "<h2>You're done!</h2>";
// new_html += "<p>You've finished the study. Thank you for your contribution to science!</b>.</p>";
// new_html += "<p>You've finished the study. Thank you for your contribution to science!</b>.</p>";
// new_html += '<p>To exit, please close this tab.</p>';
// new_html += '<p>To exit, please close this tab.</p>';


new_html += "<h2>You're done!</h2>";
new_html += "<h2>You're done!</h2>";
new_html += "<p>You've finished the study. Your completion code is <b>{{code_success}}</b>.</p>";
new_html += "<p>You've finished the study. Your completion code is <b>{{code_success}}</b>.</p>";
new_html += "<p>You will be redirected to Prolific automatically in 5 seconds.</p>";
new_html += "<p>You will be redirected to Prolific automatically in 5 seconds.</p>";


new_html += '</div>';
new_html += '</div>';
new_html += '</div>';
new_html += '</div>';


// Case 2: Not at all tasks completed
// Case 2: Not at all tasks completed
} else {
} else {


// start wrapper
// start wrapper
new_html += '<div class="task-wrapper">';
new_html += '<div class="task-wrapper">';


// start task grid
// start task grid
new_html += '<div class="available-tasks">'
new_html += '<div class="available-tasks">'


// iteratively draw tasks
// iteratively draw tasks
for (let i = 0; i < order.length; i++) {
for (let i = 0; i < order.length; i++) {


// define status
// define status
if (i < current_stage) {
if (i < current_stage) {
var status = 'completed';
var status = 'completed';
} else if (i > current_stage) {
} else if (i > current_stage) {
var status = 'disabled';
var status = 'disabled';
} else {
} else {
var status = 'current';
var status = 'current';
}
}


// start task container
// start task container
new_html += '<div class="task" status="' + status + '">';
new_html += '<div class="task" status="' + status + '">';


// draw task preview
// draw task preview
new_html += '<h3>' + titles[i] + '</h3>';
new_html += '<h3>' + titles[i] + '</h3>';
new_html += '<img src="../static/img/main/' + experiments[i] + '.png" id="task-' + i + '"></img>';
new_html += '<img src="../static/img/main/' + experiments[i] + '.png" id="task-' + i + '"></img>';
new_html += '<p>Expected time: <br>approx. ' + times[i] + ' minutes</p>';
new_html += '<p>Expected time: <br>approx. ' + times[i] + ' minutes</p>';


//
//
if (status == 'disabled') {
if (status == 'disabled') {
new_html += '<img src="../static/img/main/padlock.png"></img>';
new_html += '<img src="../static/img/main/padlock.png"></img>';
} else if (status == 'completed') {
} else if (status == 'completed') {
new_html += '<img src="../static/img/main/check.png"></img>';
new_html += '<img src="../static/img/main/check.png"></img>';
}
}


// close start container
// close start container
new_html += '</div>';
new_html += '</div>';


};
};


// close task grid
// close task grid
new_html += '</div>'
new_html += '</div>'


// add frequently asked questions
// add frequently asked questions
new_html += '<div class="faq">';
new_html += '<div class="faq">';
new_html += '<details>';
new_html += '<details>';
new_html += '<summary>Frequently asked questions</summary>';
new_html += '<summary>Frequently asked questions</summary>';
new_html += '<p><i>Who are you? How should I contact you?</i><br>We are the <a href="https://nivlab.princeton.edu/" target="_blank">Niv Lab</a> at Princeton University. The best way to contact us is through Prolific or at ra.nivlab@gmail.com.</p>';
new_html += '<p><i>Who are you? How should I contact you?</i><br>We are the <a href="https://nivlab.princeton.edu/" target="_blank">Niv Lab</a> at Princeton University. The best way to contact us is through Prolific or at ra.nivlab@gmail.com.</p>';
// new_html += '<p><i>What is the purpose of this study?</i><br>Once you are done, we are happy to tell you more about this study. Contact us on Prolific.</p>';
// new_html += '<p><i>What is the purpose of this study?</i><br>Once you are done, we are happy to tell you more about this study. Contact us on Prolific.</p>';
new_html += '<p><i> One of the tasks is not loading. What should I do?</i><br>Wait a moment and then try restarting the game. If it still does not load after 3 attempts, contact us.</p>';
new_html += '<p><i> One of the tasks is not loading. What should I do?</i><br>Wait a moment and then try restarting the game. If it still does not load after 3 attempts, contact us.</p>';
// new_html += '<p><i>I am worried I will run out of time. What should I do?</i><br>Submit the completion code "still_working" on Prolific and we will let you finish the study.</p>';
// new_html += '<p><i>I am worried I will run out of time. What should I do?</i><br>Submit the completion code "still_working" on Prolific and we will let you finish the study.</p>';
new_html += "<p><i>When should I finish all the tasks by?</i><br>Please complete this study within today.</p>";
new_html += "<p><i>When should I finish all the tasks by?</i><br>Please complete this study within today.</p>";
new_html += "<p><i>What happens if I don't finish all the tasks?</i><br>We will provide partial compensation for the tasks you have completed.</p>";
new_html += "<p><i>What happens if I don't finish all the tasks?</i><br>We will provide partial compensation for the tasks you have completed.</p>";
new_html += '</details>';
new_html += '</details>';
new_html += '</div>'
new_html += '</div>'


// close wrapper
// close wrapper
new_html += '</div>'
new_html += '</div>'


}
}


// draw html
// draw html
document.body.innerHTML = new_html;
document.body.innerHTML = new_html;


//---------------------------------------//
//---------------------------------------//
// Response handling
// Response handling
//---------------------------------------//
//---------------------------------------//


if (current_stage >= order.length) {
if (current_stage >= order.length) {


// redirect participant to prolific
// redirect participant to prolific
setTimeout(function(){
setTimeout(function(){
redirect_success();
redirect_success();
}, 5000);
}, 5000);


} else {
} else {


// add event listner for each task button
// add event listner for each task button
document.querySelector('#task-' + current_stage).addEventListener('click', function(e) {
document.querySelector('#task-' + current_stage).addEventListener('click', function(e) {
window.location.href = './experiments/' + experiments[current_stage];
window.location.href = './experiments/' + experiments[current_stage];
});
});


}
}


</script>
</script>
</html>
</html>


Diff salvati