<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
  <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
  <meta name="Author" content="Martin Poulter" />
  <title>Cooperation Study</title>
  <link rel="contents" href="pd.htm" />

  <!-- All CSS lives inside THIS single <style> block -->
  <style type="text/css">
    /* ===== original styles ===== */
    body { margin:auto; background-color:white; color:black; }
    h1, h2 { font-family:Verdana,sans-serif; color:Purple; margin-bottom:5vh; font-size:3.5em; }
    h3 { font-family:Arial,sans-serif; color:Darkblue; margin-bottom:5vh; font-size:2em; margin-top:5vh; }
    li { line-height:1.5; }
    /* fix invalid width rule */
    p { max-width:72ch; padding-right:180px; }

    /* ‘media=screen’ rules merged in (same effect, simpler) */
    body { font-family:Arial,Helvetica,sans-serif; width:100%; max-width:1000px; }
    h2 { font-family:Verdana,Helvetica,sans-serif; padding-top:0px; }
    input { border:#ccc 2px dotted; font-family:Arial,Helvetica,sans-serif; font-size:large; }
    textarea { border:#ccc 2px dotted; font-family:Arial,Helvetica,sans-serif; padding:3pt; font-size:medium; }
    input.state { border:0; font-family:Arial,Helvetica,sans-serif; font-size:18pt; }
    input.scores { border:0; font-family:Arial,Helvetica,sans-serif; font-weight:bold; }
    input.moves { background-color:#ec9; border:#fb6 2px outset; font-size:16pt; vertical-align:top; }
    button { background-color:aqua; border:blue 2px outset; font-size:22pt; vertical-align:top; text-align:center; }
    #radio { display:inline-block; padding-right:20px; }

    /* ===== your new intro formatting (now correctly inside <style>) ===== */
    .intro-box{
      background:#f8faff;
      border-left:4px solid #6b7cff;
      padding:12px 14px;
      border-radius:6px;
      max-width:72ch;
      margin-bottom:14px;
    }
        .key-points{
      margin:10px 0 8px 0;
      padding-left:1.2rem;
      max-width:72ch;
    }
    .key-points li{ margin:4px 0; }

    /* new: cooperate/defect explanation list */
    .choices-explain{
      margin-top:0;
      margin-bottom:0.75em;
      padding-left:1.2rem;
      max-width:72ch;
    }

    .example, .tip{ max-width:72ch; margin:10px 0; }

    .example strong, .tip strong{ color:#2a2f45; }

/* --- Let's play layout --- */
#gameform .game-card{
  max-width: 720px;
  border: 1px solid #e5e5e5;
  border-radius: 12px;
  padding: 16px 18px;
  background: #fff;
}
#gameform .state{
  width:100%;
  border:0;
  background: transparent;
  font-weight: 700;
  font-size: 1.1em;
  margin: 0 0 8px 0;
}
#gameform .moves-btns{
  text-align:center;
  margin: 8px 0 16px 0;   /* puts buttons right under the comment */
}
#gameform .moves-btns input.moves{
  padding:10px 18px;
  border:0;
  border-radius:8px;
  margin:0 6px;
  cursor:pointer;
  font-weight:700;
  background:#e6b871;     /* keep your current tone; change if you like */
}
#gameform .scores{ width:3.2em; text-align:center; }
#gameform .row{ display:flex; gap:10px; align-items:center; margin:6px 0; }
#gameform .row input[type="text"]{ flex:1; }

button {
  padding: 12px 24px;
  font-size: 1.2em;
  border-radius: 10px;
  border: none;
  margin: 10px;
  cursor: pointer;
  transition: 0.2s;
}

button#cooperate {
  background-color: #4CAF50;
  color: white;
}
button#cooperate:hover {
  background-color: #45a049;
}

button#defect {
  background-color: #f44336;
  color: white;
}
button#defect:hover {
  background-color: #da190b;
}

/* layout spacing */
section { margin-top: 40px; }

/* reusable card look */
.card {
  border: 1px solid #e5e5e5;
  border-radius: 12px;
  padding: 16px 18px;
  background: #fff;
  box-shadow: 0 3px 6px rgba(0,0,0,0.04);
  margin-bottom: 16px;
}

footer.small {
  margin-top: 28px;
  font-size: 0.9em;
  color: #555;
  max-width: 72ch;
}

/* --- improved comment box and buttons --- */
.comment-box {
  background-color: #f8f9fa;
  border: 1px solid #e0e0e0;
  border-radius: 12px;
  padding: 20px;
  text-align: center;
  margin: 10px 0 20px;
}

.comment-text {
  font-size: 1.1em;
  margin-bottom: 15px;
  color: #333;
}

.moves-btns {
  display: flex;
  justify-content: center;
  gap: 20px;
}

/* Co-operate and Defect buttons */
#cooperate, #defect {
  font-size: 1.4em;
  font-weight: bold;
  padding: 14px 28px;
  border-radius: 10px;
  border: none;
  cursor: pointer;
  color: white;
  transition: all 0.2s ease-in-out;
  box-shadow: 0 4px 10px rgba(0,0,0,0.15);
}

#cooperate {
  background-color: #43a047; /* brighter green */
}
#cooperate:hover {
  background-color: #388e3c;
  transform: scale(1.05);
}

#defect {
  background-color: #e53935; /* brighter red */
}
#defect:hover {
  background-color: #c62828;
  transform: scale(1.05);
}

/* --- Personal data section styling --- */
#dataform {
  display: flex;
  flex-direction: column;
  gap: 12px;
  max-width: 480px;
}

#dataform label {
  font-weight: 600;
  margin-top: 8px;
  color: #222;
}

#dataform input[type="text"] {
  border: 1px solid #ccc;
  border-radius: 6px;
  padding: 8px 10px;
  font-size: 1em;
  width: 100%;
  box-sizing: border-box;
}

#dataform input[readonly] {
  background-color: #f8f8f8;
  border: 1px solid #ddd;
  width: 60px;
  text-align: center;
}

#dataform .consent-section {
  margin-top: 10px;
  background: #f9f9ff;
  border: 1px solid #e3e3ff;
  border-radius: 8px;
  padding: 10px 12px;
}

#dataform .consent-label {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 6px;
}

#dataform a {
  color: #6b7cff;
  text-decoration: underline;
}

#dataform a:hover {
  text-decoration: none;
}

#submit {
  background-color: #6b7cff;
  color: white;
  font-size: 1.1em;
  padding: 10px 20px;
  border-radius: 8px;
  border: none;
  cursor: pointer;
  transition: 0.2s;
  align-self: flex-start;
}

#submit:hover {
  background-color: #5c6ce5;
}

#submit:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}

/* --- Personal data dropdowns --- */
#dataform select {
  border: 1px solid #ccc;
  border-radius: 6px;
  padding: 8px 10px;
  font-size: 1em;
  background-color: white;
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  cursor: pointer;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='8'><path fill='%236b7cff' d='M1 1l5 5 5-5'/></svg>");
  background-repeat: no-repeat;
  background-position: right 10px center;
  background-size: 12px;
}

#dataform select:focus {
  outline: none;
  border-color: #6b7cff;
  box-shadow: 0 0 0 2px rgba(107,124,255,0.2);
}

#educationOtherBox {
  animation: fadeIn 0.3s ease;
}

@keyframes fadeIn {
  from { opacity: 0; transform: translateY(-5px); }
  to { opacity: 1; transform: translateY(0); }
}

  </style>

  <!-- ===== scripts (unchanged) ===== -->
  <script type="text/javascript">
    function SubForm(){
      fetch("https://api.apispreadsheets.com/data/6YDDsMez4D7A2T8s/", {
        method: "POST",
headers: { "Content-Type": "application/json" },
body: JSON.stringify({"data": {
  "pseudo": document.getElementsByName("pseudo")[0].value,
  "gender": document.getElementsByName("gender")[0].value,
  "age": document.getElementsByName("age")[0].value,
  "education": document.getElementsByName("education")[0].value,
  "educationOther": document.getElementsByName("educationOther")[0].value,
  "cooperation": document.getElementsByName("cooperation")[0].value
}})

      }).then(function(res){
        if (res.status === 201){
          alert("Your data has been correctly submitted. Thank you for participating! You may close the page now");
        } else {
          alert("Sorry, there has been a problem. Please inform the researcher about it, apologies for the inconvenience!");
        }
      }).catch(function(err){ console.log(err); });
    }

    function disableSubmit() {
      document.getElementById("submit").disabled = true;
    }
    function activateButton(element) {
      document.getElementById("submit").disabled = !element.checked;
    }
function toggleEducationOther() {
  var select = document.getElementById('education');
  var otherBox = document.getElementById('educationOtherBox');
  var otherInput = document.getElementById('educationOther');
  
  if (select.value === 'Other') {
    otherBox.style.display = 'block';
    otherInput.required = true; // make it required only if visible
  } else {
    otherBox.style.display = 'none';
    otherInput.value = ''; // clear any previous text
    otherInput.required = false;
  }
}

  </script>
</head>

<body onload="document.gameform.reset();disableSubmit()">


<h1>Cooperate or Defect?</h1>

<!-- payoff table stays floated right -->
<table cellspacing="1" border="1" cellpadding="3" style="float:right; margin-left:16px;">
  <tr><td colspan="2" rowspan="2"></td><th colspan="2" bgcolor="#eeeeee">Computer</th></tr>
  <tr><th bgcolor="#cccccc">C</th><th bgcolor="#cccccc">D</th></tr>
  <tr><th rowspan="2" bgcolor="#eeeeee">You</th><th bgcolor="#cccccc">C</th>
      <td align="center">30 <sup>30</sup></td><td align="center">0 <sup>50</sup></td></tr>
  <tr><th bgcolor="#cccccc">D</th>
      <td align="center">50 <sup>0</sup></td><td align="center">10 <sup>10</sup></td></tr>
</table>

<div class="intro-box">
  <p><strong>Welcome!</strong> This is a simulator of iterated cooperative behaviour. You will repeatedly interact with the computer in a series of short decision rounds.</p>
</div>

<p><strong>You will have 2 choices in each round:</strong></p>
<ul class="choices-explain">
  <li><strong>Cooperate (C)</strong> = work together with the computer.</li>
  <li><strong>Defect (D)</strong> = act for yourself rather than working together.</li>
</ul>
<p>Both options are valid – there are no right or wrong answers.</p>


<ul class="key-points">
  <li>You will play <strong>20 rounds</strong> in total.</li>
  <li>Your goal is to achieve the <strong>highest total score</strong> by the end of the game.</li>
  <li>Scores are determined by the payoff table on the right.</li>
</ul>

<p class="example">
  <strong>Example on the right:</strong> 
  If you both cooperate, you each receive 30 points. 
  If you cooperate but the computer defects, you score 0 while the computer scores 50. 
  These outcomes illustrate how cooperation and competition affect performance over time.
</p>

<p class="tip">
  <strong>Tip:</strong> Think strategically, the computer isn’t necessarily your enemy,
  but how you play across rounds will influence your overall success!</p>


<script language="JavaScript">
var usrpayoff=0;
var comppayoff=0;
function gamemove(theform,move,dataform)
{var count=theform.usrmove.value.length+1;
if (count<21)
	{var lastmove=theform.usrmove.value.charAt(count-2);
	var compmove= Math.random()>0.5 ? 'C' :'D';
	theform.usrmove.value=theform.usrmove.value+move;count++;
	theform.state.value= count==21 ?'Game Over ' :'Ready for move '+count+' of 20';
if (count == 21) {

    // Update on-screen message
    document.getElementById('commentText').textContent =
      "Game finished! Please scroll down to complete the personal data section.";

    // Disable buttons
    document.getElementById("cooperate").disabled = true;
    document.getElementById("defect").disabled = true;

    // Show popup alert (the old behaviour)
    alert('This game has ended. Please fill in the personal data section below and click on the "Submit" button at the bottom to submit your results.\n\nThank you for participating!');
}
	theform.pcmove.value=theform.pcmove.value+compmove;
	if (move=='C')
		{usrpayoff= compmove=='C' ? 30 : 0;
		comppayoff= compmove=='C' ? 30 : 50;
        dataform.cooperation.value=dataform.cooperation.value-0+1;
		}
	else
		{usrpayoff= compmove=='C' ? 50 : 10;
		comppayoff= compmove=='C' ? 0 : 10;
		}
	theform.usrscore.value=theform.usrscore.value-0+usrpayoff;
	theform.compscore.value=theform.compscore.value-0+comppayoff;
	document.getElementById('commentText').textContent =
  'You played ' + move + ' and the computer played ' + compmove +
  '. You got ' + usrpayoff + ' points while the computer got ' + comppayoff + ' points.';
}
else
	{alert('This game has ended. Please enter your pseudonym, biological sex at birth and age below and click on the "Submit" button at the bottom to submit your results. \n \n If you wish to play and know more, please go to https://www.economicsnetwork.ac.uk/archive/poulter/pd.htm. Thank you for participating !')}
}
</script>
<!-- This script created April 2003 by Martin Poulter for Economics LTSN
http://www.economicsnetwork.ac.uk/          econ-network@bristol.ac.uk
You may edit this code but please retain this notice.-->


<h3>Let's play!</h3>

<form id="gameform" name="gameform">
  <div class="game-card">

    <input type="text" name="state" id="state" class="state"
           value="Ready for move 1 of 20" />


<div class="comment-box">
  <p id="commentText" class="comment-text" aria-live="polite">
  Make your first choice using the buttons below.
</p>
  <div class="moves-btns">
    <button id="cooperate" type="button" onclick="gamemove(this.form,'C',dataform)">Co-operate</button>
    <button id="defect" type="button" onclick="gamemove(this.form,'D',dataform)">Defect</button>
  </div>
</div>


    <p>
      Your Score so far:
      <input type="text" name="usrscore" id="usrscore" value="0"
             class="scores" readonly="readonly" />
      &nbsp;&nbsp; Computer's Score so far:
      <input type="text" name="compscore" id="compscore" value="0"
             class="scores" readonly="readonly" />
    </p>

    <div class="row">
      <span>Your moves:</span>
      <input type="text" size="36" name="usrmove" value="" readonly="readonly" />
    </div>
    <div class="row">
      <span>Computer's moves:</span>
      <input type="text" size="36" name="pcmove" value="" readonly="readonly" />
    </div>

  </div>
</form>

<h3>Personal data</h3>

<form id="dataform" name="dataform" class="card">
  <p>Now, please tell us more about yourself.</p>

  <label for="pseudo">Pseudonym (please do not enter your real name):</label>
  <input id="pseudo" type="text" name="pseudo" maxlength="60" placeholder="e.g. owl_27" required />

  <label for="gender">Gender:</label>
  <select id="gender" name="gender" required>
    <option value="" disabled selected>Select your gender</option>
    <option value="Female">Female</option>
    <option value="Male">Male</option>
    <option value="Non-binary">Non-binary</option>
    <option value="Prefer not to say">Prefer not to say</option>
  </select>

  <label for="age">Age:</label>
  <input id="age" type="text" name="age" maxlength="3" placeholder="e.g. 21" pattern="[0-9]{1,3}" required />

  <label for="education">Education level:</label>
<select id="education" name="education" required onchange="toggleEducationOther()">
  <option value="" disabled selected>Select your education level</option>
  <option value="GCSE">GCSE</option>
  <option value="A-level">A-level</option>
  <option value="College">College</option>
  <option value="Undergraduate">Undergraduate</option>
  <option value="Postgraduate">Postgraduate</option>
  <option value="Other">Other</option>
</select>

<!-- Hidden text box appears only if “Other” is chosen -->
<div id="educationOtherBox" style="display:none; margin-top:8px;">
  <label for="educationOther">Please specify:</label>
  <input id="educationOther" type="text" name="educationOther" maxlength="60"
         placeholder="e.g., vocational training, professional qualification" />
</div>


  <p><strong>You cooperated</strong> 
    <input type="text" size="5" maxlength="5" name="cooperation" value="0" readonly="readonly" /> 
    <strong>times.</strong>
  </p>

  <div class="consent-section">
    <p>Please read the <a href="consent_found.pdf" target="_blank" rel="noopener">consent form</a>.</p>
    <label class="consent-label">
      <input type="checkbox" name="consent" onchange="activateButton(this)">
      I have read the consent form and agree to take part in this study.
    </label>
  </div>

  <button id="submit" type="button" onclick="SubForm()">Submit</button>
</form>


<script type="text/javascript">
(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)})(window,document,'script','//www.google-analytics.com/analytics.js','ga');

ga('create', 'UA-1171701-1', 'auto');
ga('send', 'pageview');
</script>
<script type="text/javascript" src="/google_cse_min.js" defer="defer"></script>
</body>
</html>