<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.3.1/dist/css/bootstrap.min.css"/>
<div class="response">
<div id="startcontainer" class="container hidden">
<div class="row mt-4 mb-5">
<div class="col aligncenter lighttext" style="font-size: 32px;">
Babecock Memory Test
</div>
</div>
<div class="row mt-5">
<div id="startcontainertext" class="col aligncenter lighttext">
You will be presented with pairs of images of women and cocks. You will be tested on your ability to memorize and match them.
</div>
</div>
<div class="row mt-5">
<div id="difficultytext" class="col aligncenter lighttext">
Difficulty: <span id="difficulty" style="color:#fcddbc">Normal</span>
</div>
</div>
<div class="row mt-2">
<div class="col aligncenter lighttext">
Pairs to memorize: <span id="difficultypairs" style="color:#fcddbc">15</span>
</div>
</div>
<div class="row mt-2">
<div class="col aligncenter lighttext">
Retries: <span id="difficultyfailuresallowed" style="color:#fcddbc">2</span>
</div>
</div>
<div class="row mt-2">
<div class="col aligncenter lighttext">
Images <span id="difficultyshuffle" style="color:#b8d8ba">will not</span> shuffle on retry
</div>
</div>
<div class="row mt-2">
<div class="col aligncenter">
<input id="difficultyslider" type="range" id="difficulty" name="Difficulty" min="0" max="5" value="2">
</div>
</div>
<div class="row mt-2">
<div id="startbutton" class="col aligncenter">
<a type="button">Start</a>
</div>
</div>
</div>
<div id="studycontainer" class="hidden">
<div class="container">
<div class="row p-0 study-row">
<div class="col-6 p-0 study-col aligncenter">
<img
class="imgscale"
id="leftimage"
src=""
/>
</div>
<div class="col-6 p-0 study-col aligncenter">
<img
class="imgscale"
id="rightimage"
src=""
/>
</div>
</div>
<div class="row pt-2">
<div class="col aligncenter">
<a id="nextbutton" type="button">Next</a>
</div>
</div>
</div>
</div>
<div id="testcontainer" class="hidden">
<div class="container">
<div class="row test-toprow pb-2">
<div class="col test-col aligncenter">
<img
class="test-topimg"
id="testtopimage"
src=""
/>
</div>
</div>
<div class="row p-0 test-row pb-2">
<div class="col-4 p-0 test-col aligncenter">
<img
class="imgscale"
type="button"
id="testleftimage"
src=""
/>
</div>
<div class="col-4 p-0 test-col aligncenter">
<img
class="imgscale"
type="button"
id="testcenterimage"
src=""
/>
</div>
<div class="col-4 p-0 test-col aligncenter">
<img
class="imgscale"
type="button"
id="testrightimage"
src=""
/>
</div>
</div>
<div class="row">
<div id="testcontainertext" class="col test-col aligncenter">Click on the matching image.</div>
</div>
</div>
</div>
<div id="gameovercontainer" class="container hidden">
<div class="row mt-5">
<div id="gameovercontainertext" class="col aligncenter lighttext">
</div>
</div>
<div class="row mt-5">
<div class="col aligncenter">
<a id="gameoverbutton" type="button">Try again</a>
</div>
</div>
</div>
<div id="motivationcontainer" class="container hidden">
<div class="row test-toprow pb-2">
<div class="col test-col aligncenter">
<video id="motivationvideo" height="100%;" preload muted loop>
<source src="" type="video/mp4">
</video>
</div>
</div>
<div class="row mt-5">
<div id="motivationcontainertext" class="col aligncenter lighttext">
</div>
</div>
<div id="mdhidden" class="row mt-5">
<div class="col aligncenter">
<a id="motivationbutton" type="button">Try again</a>
</div>
</div>
</div>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.1/jquery.min.js"></script>
<script src="https://requirejs.org/docs/release/2.3.5/minified/require.js"></script>