pleabargain-simulation/index.html at master · Plea-Justice/pleabargain-simulation · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
<!doctype html>
<html lang="en" class="h-100">

<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
  <meta name="description" content="">
  <title>Simulation Testing Panel</title>

  <link rel="canonical" href="https://demo.pleajustice.org">

  <link rel="stylesheet" href="css/bulma.min.css">

  <script>
    var n_conditions = { n_conditions };

    function go() {
      let name = document.getElementById("username").value;
      let cond = document.getElementById("condition").value;
      let avatar = document.getElementById("custom_avatar").checked;
      let fast = document.getElementById("fast_mode").checked;

      if (isNaN(cond) || cond < 1 || cond > n_conditions) {
        document.getElementById("condition").setAttribute("class", "input is-danger");
        document.getElementById("cond_helptext").innerText = `Experimental condition must be between 1 and ${n_conditions}.`
        return;
      } else {
        document.getElementById("condition").setAttribute("class", "input");
        document.getElementById("cond_helptext").innerText = "";
      }

      let url = `${avatar ? "avatar.html" : "simulation.html"}?condition=${cond}&Name=${name}${fast ? "&mode=fast" : ""}`;
      window.location.href = url;
    }

    function randomlyAssign() {
      document.getElementById("condition").value = Math.floor((Math.random() * n_conditions) + 1);
    }

  </script>
</head>

<style>
	html,
	body {
		margin: 2vh;
	}

	body>footer {
		position: absolute;
		bottom: 2vh;
		right: 2vh;
	}
</style>

<body>
  <section class="section columns">
    <div class="container column">
      <h1 class="title">
        {{ study_name }}
      </h1>
      <p class="subtitle">
        Input the required parameters and then click to start the simulation.
      </p>
      <div class="container">
        <div class="field">
          <label class="label">Participant's Name:</label>
          <div class="control">
            <input class="input" style="width:10em;" type="text" id="username" value="Test User">
          </div>
        </div>

        <div class="field">
          <label class="label">Experimental Condition:</label>
          <div class="control">
            <input class="input" style="width:10em;" type="number" id="condition" value="1" min="1" max="{{ n_conditions }}"
              placeholder="1 - {{ n_conditions }}">
              <button class="button" onclick="randomlyAssign()">Randomly Assign</button>
          </div>
          <p class="help" id="cond_helptext"></p>
        </div>

        <div class="field">
          <div class="control">
            <label class="label">
              Avatar Customization:
              <input type="checkbox" id="custom_avatar">
            </label>
          </div>
        </div>

        <div class="field">
          <div class="control">
            <label class="label">
              Fast Mode (Testing):
              <input type="checkbox" id="fast_mode">
            </label>
          </div>
        </div>

        <p class="help">
          Additional parameters may be passed through by Qualtrics, but they will not affect the simulation.<br/>
          Experimental condition would be randomly assigned by Qualtrics.
        </p>

        <p><br/>
          <button class="button is-large" onclick="go()">Start Simulation</button>
        </p>
      </div>
    </div>
    <div class="container column">
      <table class="table is-narrow">
        <thead>
          <th><abbr title="Experimental Condition">Condition</abbr></th>
          <th><abbr title="Description">Description</abbr></th>
        </thead>
        <tbody>
            {{ condition_descriptions }}
        </tbody>
      </table>
    </div>
  </section>
  <footer>
    <div class="content">
      <p>This simulation has been created with the <a
          href="https://pleajustice.org">Plea Justice Project</a>.
    </div>
  </footer>
</body>

</html>