Outer-Limit/index.html at main · Social-Design-Lab/Outer-Limit · 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
<!DOCTYPE html>
<html>

<head>
    <title>Reddit Extension</title>
    <meta charset="utf-8">
    <script src="timer.js"></script>
    <link href="./bootstrap/bootstrap.min.css" rel="stylesheet">
    <link href="./styles/styles.css" rel="stylesheet">
</head>

<body>
    <div class="container mt-3" style="width: 450px;">
        <div id="display" class="row-fluid">
            <p id="timer">
                The experiment has started. You will be able to view the <strong>post-survey link</strong> one minute after the experiment begins. Please take a look at the  <strong> first 10 posts by scrolling down the Reddit home page.</strong> If you wish to quit, please click <strong>uninstall</strong>. Doing so will automatically end the experiment.
            </p>

            <div class="row mt-3">

                <div class="col d-flex justify-content-start">
                    <button class="btn btn-danger me-2" id="btnUninstall" data-bs-toggle="modal" data-bs-target="#uninstallModal"> Uninstall </button>
                </div>

                <div class="modal fade" id="uninstallModal" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
                    <div class="modal-dialog">
                    <div class="modal-content">
                        <div class="modal-header">
                        <h1 class="modal-title fs-5" id="exampleModalLabel">Uninstall Extension</h1>
                        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                        </div>
                        <div class="modal-body">
                            Are you sure you want to quit the study?
                        </div>
                        <div class="modal-footer">
                        <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
                        <button type="button" class="btn btn-danger" id="confirmUninstallBtn">Confirm Uninstall</button>
                        </div>
                    </div>
                    </div>
                </div>

                <!-- <div class="col d-flex justify-content-end" id="highlightWindow">
                    <button class="btn btn-primary me-2" id="btnHighlight">Start</button>
                    <button class="btn btn-secondary" id="btnReset">Reset</button>
                </div> -->
            </div>
        </div>
        <div id="endexp" class="row-fluid">
            <ol>
  <li>No new tab? Click <a href="https://old.reddit.com/r/VACCINES/comments/1rsvsp8/mmr_vaccine_while_on_tremfya/" target="_blank" rel="noopener noreferrer"><strong>this post</strong></a>.</li>
  <li>Then complete the <strong>Post-survey</strong> below.</li>
  <li>Stay on that post (do <strong>not</strong> browse elsewhere). Keep Outer Limits installed; it <strong>auto-deactivates</strong> after 30 minutes.</li>
</ol>
            <a id="my-link" href="https://lehigh.co1.qualtrics.com/jfe/form/SV_0IDi5taX2GTkEqa">Visit Post-survey</a>
            <button type="button" class="btn btn-danger" id="end_install">Uninstall</button>

        </div>
        <div id="settings" class="row-fluid">
            <h2 class="text-center">Reddit Extension</h2>
            <form id="form">
                <p>Please fill your Prolific ID</p>
                <label for="lname">Prolific ID:</label>
                <input type="text" id="pid" name="pid" required="required"><br><br>
                <p>Click the "Submit" button and the experiment will start. A Reddit page will open in a new tab.</p>
                <button type="button" id="start" class="btn btn-success">Submit</i></button>
            </form>
        </div>

        <div id='midpop' class="container">
            <div class="row">
                <div class="col-xs-12">
                    <p class="page-header">1 is bad, 10 is good (i.e., "How happy are you feeling today?")</p>
                    <div class="chart-scale">
                        <button data-question-group="q1" class="q1 btn btn-scale btn-scale-desc-1">1</button>
                        <button data-question-group="q1" class="q1 btn btn-scale btn-scale-desc-2">2</button>
                        <button data-question-group="q1" class="q1 btn btn-scale btn-scale-desc-3">3</button>
                        <button data-question-group="q1" class="q1 btn btn-scale btn-scale-desc-4">4</button>
                        <button data-question-group="q1" class="q1 btn btn-scale btn-scale-desc-5">5</button>
                        <button data-question-group="q1" class="q1 btn btn-scale btn-scale-desc-6">6</button>
                        <button data-question-group="q1" class="q1 btn btn-scale btn-scale-desc-7">7</button>
                        <button data-question-group="q1" class="q1 btn btn-scale btn-scale-desc-8">8</button>
                        <button data-question-group="q1" class="q1 btn btn-scale btn-scale-desc-9">9</button>
                        <button data-question-group="q1" class="q1 btn btn-scale btn-scale-desc-10">10</button>
                    </div>
                    <hr />
                    <p class="page-header">How likely are you to do this experiment again (i.e. "1 least likely and 10
                        most likely")</p>
                    <div class="chart-scale">
                        <button data-question-group="q2" class="q2 btn btn-scale btn-scale-desc-1">1</button>
                        <button data-question-group="q2" class="q2 btn btn-scale btn-scale-desc-2">2</button>
                        <button data-question-group="q2" class="q2 btn btn-scale btn-scale-desc-3">3</button>
                        <button data-question-group="q2" class="q2 btn btn-scale btn-scale-desc-4">4</button>
                        <button data-question-group="q2" class="q2 btn btn-scale btn-scale-desc-5">5</button>
                        <button data-question-group="q2" class="q2 btn btn-scale btn-scale-desc-6">6</button>
                        <button data-question-group="q2" class="q2 btn btn-scale btn-scale-desc-7">7</button>
                        <button data-question-group="q2" class="q2 btn btn-scale btn-scale-desc-8">8</button>
                        <button data-question-group="q2" class="q2 btn btn-scale btn-scale-desc-9">9</button>
                        <button data-question-group="q2" class="q2 btn btn-scale btn-scale-desc-10">10</button>
                    </div>

                </div>
            </div>
            <button type="submit" id="midpop-submit" class="btn btn-success">Submit</button>
        </div>
    </div>
    <script src="./bootstrap/bootstrap.bundle.js"></script>
    <script src="uninstall.js"></script>
</body>
</html>