PerformoBotSurveyWebsite/study_task.html at master · DECLARE-Project/PerformoBotSurveyWebsite · 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
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">

    <title>PerformoBot Study</title>
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css"
        integrity="sha384-HSMxcRTRxnN+Bdg0JdbxYKrThecOKuH5zCYotlSAcp1+c8xmyTe9GYg1l9a69psu" crossorigin="anonymous">
    <script src="https://code.jquery.com/jquery-1.12.4.min.js"
        integrity="sha384-nvAa0+6Qg9clwYCGGPpDQLVpLNn0fRaROjHqs13t4Ggj3Ez50XnGQqc/r8MhnRDZ"
        crossorigin="anonymous"></script>
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"
        integrity="sha384-aJ21OjlMXNL5UyIl/XNwTMqvzeRMZH2w8c5cRVpzpU8Y5bApTppSuUkhZXN0VxHd"
        crossorigin="anonymous"></script>
    <link rel="stylesheet" type="text/css" href="style/index_new.css">

    <script>
    var counterEndDate;
    var interval;
	const id = random_id();
	const surveyLink = "https://docs.google.com/forms/d/e/1FAIpQLSdqrDNt_Jx0F5SGGfq-E4UxNVVlxQPpO7OBYU1b7nhCegVobg/viewform?usp=pp_url&entry.378572693="+ id;

	function random_id() {
 		 return (
   		 Number(String(Math.random()).slice(2)) +
   		 Date.now() +
   		 Math.round(performance.now())
  		).toString(10).slice(0,5);
	}

        function startCounter() {
            document.getElementById("counter").innerHTML = "8:00";

            var currentDate = new Date();
            counterEndDate = new Date();
            counterEndDate.setMinutes(currentDate.getMinutes() + 8);

            interval = setInterval(function () {
                var now = new Date().getTime();
                var distance = counterEndDate - now;

                var minutes = Math.floor((distance % (1000 * 60 * 60)) / (1000 * 60));
                var seconds = Math.floor((distance % (1000 * 60)) / 1000);

		if(seconds < 10){
			seconds = "0" + seconds;
		}

                document.getElementById("counter").innerHTML = minutes + ":" + seconds;

                if (distance < 0) {
                    // time's up
                    clearInterval(interval);
                    endTask();
                }
            }, 200);
        }

        function loadSurvey() {
            window.open(surveyLink);
        }

        function showReport() {
            window.open("./report/48b49d70/Report.html");

            const surveyBtn = document.getElementById("show-survey-btn");
            surveyBtn.disabled = false;
        }

        function finishTask() {
            let finishTask = confirm("Are you sure that you want to finish the task?\n\nPlease only do this if you have either completed the task or are stuck.");

            if (finishTask) {
                clearInterval(interval);

                const studyContainer = document.getElementById("study-container");
                studyContainer.style.display = "none";

                const taskFinishedContainer = document.getElementById("task-finished-container");
                taskFinishedContainer.style.display = "block";
            }
        }

        function endTask() {
            // Hide study container
            const studyContainer = document.getElementById("study-container");
            studyContainer.style.display = "none";

            // Show message and ask user to continue with survey
            const surveyContainer = document.getElementById("survey-container");
            surveyContainer.style.display = "block";
        }

    </script>
</head>

<body onload="startCounter()">
    <div class="container-fluid">
        <div class="row" id="study-container">
            <div class="col-md-4 col-md-offset-2">
                <div class="textbox">
                    <div class="task-header">
                        <h3 id="task-heading">Task</h3>
                        <h2 id="counter"></h2>
                    </div>
                    <br>
                    <p align="justify">
                        Terrible news, next week is the registration period for the university courses! <br><br>
                        We expect an unusually high number of concurrent users (~500) to the Registr@tion web service. 			The service is available under https://registration.uni-stuttgart.edu/login. <br><br> We are 			not sure whether we provided enough resources to our servers to cope with that amount of load.
                        You have been given the task to investigate whether our servers can handle this load and 				whether they will stay available throughout this whole registration period. Use PerformoBot to 				investigate the problem.
                        PerformoBot will support you in evaluating the performance of Registr@tion, so feel free to ask 			PerformoBot for help if you are stuck. <br> <br>

                        <b>Please start your conversation by typing in your survey id: <script type="text/javascript">
        document.write(id)
      </script>.</b> <br><br>

                        Please click the button below to continue after you have completed the task. You will be forwarded to an example report that will show the results of the load test and to the second part of the study that consists of a survey.
                    </p>
                    <br>
                    <button type="button" id="start-survey-id" class="btn btn-primary" onclick="finishTask()">I'm done</button>
                </div>
            </div>
            <div class="col-md-4">
                <div class="chatbot-box" id="chatbot-box">
                    <iframe title="chatbot-window" class="chatbot-window" allow="microphone;" width="100%" height="100%"
                        src="https://console.dialogflow.com/api-client/demo/embedded/bd792e20-19dd-41eb-9e57-14f40c01c0ce">
                    </iframe>
                </div>
            </div>
        </div>
        <div class="row" id="survey-container">
            <div class="col-md-8 col-md-offset-2">
                <div class="textbox" id="survey-box">
                   <h3>TIME'S UP</h3>
                   <p>The time that you had to work on the task has passed. <br><br>
                    The query that you should have created with PerformoBot would have been: <br>
                    <em>Perform a load test with 500 users at https://registration.uni-stuttgart.edu/login and measure the server status.</em> <br><br>
                    If you could not configure the load test and let PerformoBot create a performance report for you, you can access the report for the query above <a target="_blank" rel="noopener noreferrer" href="./report/48b49d70/Report.html">here.</a> <br>
                    Please take a look at it if you haven't yet and try to figure out if the servers are able to handle the load. <br><br>
                    Afterwards, please continue the study by filling out the survey. <br>
                   </p>
                   <button type="button" class="btn btn-primary" onclick="loadSurvey()">Survey</button>
                </div>
            </div>
        </div>
        <div class="row" id="task-finished-container">
            <div class="col-md-8 col-md-offset-2">
                <div class="textbox" id="task-finished-message">
                    <h3>Thank you for finishing the task!</h3>
                    <p>After you ask PerformoBot to run the load test that you have configured it would usually present the results to you in the form of a generated report.
                        To save time, we will show you an example report for the following query: <br> <br>
                        <em>Perform a load test with 500 users at https://registration.uni-stuttgart.edu/login and measure the server status.</em> <br><br>

                        Please open the report and try to find out if the servers of our Registr@tion service would be able to handle the load. <br> <br>
                        After you have taken a look at the report come back to this window and click the other button to open the survey which makes up the second part of the study.

                    </p>
                    <br>
                    <button type="button" id="show-report-btn" class="btn btn-primary" onclick="showReport()">Show report</button>
                    <button type="button" id="show-survey-btn" class="btn btn-primary" onclick="loadSurvey()" disabled>Start survey</button>
                </div>
            </div>
        </div>
    </div>
</body>

</html>