├── .gitignore ├── README.md ├── debug ├── passwordHash.php ├── authenticate.php ├── password.sample.php ├── deleteParticipant.php ├── getActionLog.php ├── getParticipants.php ├── registerParticipant.php ├── setParticipantID.php ├── createTables.php ├── index.html └── debug.js ├── thanks ├── languages │ ├── en.json │ └── de.json └── index.html ├── error ├── languages │ ├── en.json │ └── de.json └── index.html ├── config.sample.php ├── logger.php ├── sendFile ├── phone │ ├── status.php │ ├── languages │ │ ├── en.json │ │ └── de.json │ ├── index.html │ └── phone.js ├── languages │ ├── en.json │ └── de.json └── index.html ├── cancel ├── languages │ ├── en.json │ └── de.json ├── cancel.js └── index.html ├── screenshot ├── languages │ ├── en.json │ └── de.json ├── screenshot.php ├── screenshot.js ├── index.html └── qrcode.min.js ├── mysql.php ├── index.js ├── survey ├── survey.js ├── survey.php ├── languages │ ├── en.json │ └── de.json └── index.html ├── 2fa-device └── index.html ├── TUM_Web_Logo_blau.svg ├── index.html ├── logger.js ├── control ├── languages │ ├── en.json │ └── de.json ├── index.html └── control.js ├── i18n.js ├── webSerial.js ├── task.js └── languages ├── en.json └── de.json /.gitignore: -------------------------------------------------------------------------------- 1 | config.php 2 | debug/password.php 3 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # Web Bluetooth Remote Control 2 | 3 | This is the Web page for the Web Bluetooth Remote Control. 4 | -------------------------------------------------------------------------------- /debug/passwordHash.php: -------------------------------------------------------------------------------- 1 | prepare("DELETE FROM Participants WHERE id = ?"); 6 | $stmt->bind_param("s", $id); 7 | 8 | $id = parsePost('id'); 9 | $stmt->execute(); 10 | 11 | $stmt->close(); 12 | $conn->close(); 13 | -------------------------------------------------------------------------------- /logger.php: -------------------------------------------------------------------------------- 1 | prepare("INSERT INTO action_log (participant, action) VALUES (?, ?)"); 5 | $stmt->bind_param("si", $uniqid, $action); 6 | 7 | $uniqid = $_COOKIE['participant']; 8 | $action = $_POST['action']; 9 | 10 | $stmt->execute(); 11 | $stmt->close(); 12 | 13 | $conn->close(); 14 | -------------------------------------------------------------------------------- /debug/getActionLog.php: -------------------------------------------------------------------------------- 1 | options(MYSQLI_OPT_INT_AND_FLOAT_NATIVE, 1); 6 | 7 | $sql = "SELECT * FROM action_log ORDER BY date DESC"; 8 | $result = $conn->query($sql); 9 | 10 | header('Content-Type: application/json'); 11 | echo json_encode($result->fetch_all(MYSQLI_ASSOC)); -------------------------------------------------------------------------------- /sendFile/phone/status.php: -------------------------------------------------------------------------------- 1 | query($sql); 6 | 7 | header('Content-Type: text/plain'); 8 | 9 | if ($result->num_rows > 0) { 10 | $row = $result->fetch_assoc(); 11 | echo $row['action']; 12 | return; 13 | } 14 | -------------------------------------------------------------------------------- /debug/getParticipants.php: -------------------------------------------------------------------------------- 1 | options(MYSQLI_OPT_INT_AND_FLOAT_NATIVE, 1); 6 | 7 | $sql = "SELECT * FROM Participants ORDER BY reg_date DESC"; 8 | $result = $conn->query($sql); 9 | 10 | header('Content-Type: application/json'); 11 | echo json_encode($result->fetch_all(MYSQLI_ASSOC)); -------------------------------------------------------------------------------- /cancel/languages/en.json: -------------------------------------------------------------------------------- 1 | { 2 | "abort_really": "Do you really want to cancel? 😢", 3 | "abort_text": "If you really want to cancel, click on \"Cancel experiment\". Otherwise, you can click on \"Back to experiment\" to continue.", 4 | "back_to_experiment": "Back to experiment", 5 | "cancel_experiment": "Cancel experiment", 6 | "title": "🛑 Cancel experiment", 7 | "to_survey": "Go to survey" 8 | } -------------------------------------------------------------------------------- /cancel/languages/de.json: -------------------------------------------------------------------------------- 1 | { 2 | "abort_really": "Willst du wirklich abbrechen? 😢", 3 | "abort_text": "Wenn du wirklich abbrechen möchtest, klicke auf „Abbrechen“. Ansonsten kannst du auf „Zurück zum Experiment“ klicken, um fortzufahren.", 4 | "back_to_experiment": "Zurück zum Experiment", 5 | "cancel_experiment": "Experiment abbrechen", 6 | "title": "🛑 Experiment abbrechen", 7 | "to_survey": "Zur Umfrage" 8 | } -------------------------------------------------------------------------------- /screenshot/languages/en.json: -------------------------------------------------------------------------------- 1 | { 2 | "device_model": "Device model", 3 | "device_model_input": "A3090, SM-S928B or Samsung Galaxy S24 Ultra", 4 | "error": "Error: ", 5 | "screenshot": "Screenshot", 6 | "screenshot_success": "Screenshot successfully saved!", 7 | "screenshot_text": "Please upload the screenshot of the pairing dialog here.", 8 | "select_image": "Select image:", 9 | "title": "Screenshot", 10 | "upload_screenshot": "Upload screenshot" 11 | } -------------------------------------------------------------------------------- /screenshot/languages/de.json: -------------------------------------------------------------------------------- 1 | { 2 | "device_model": "Gerätemodell", 3 | "device_model_input": "A3090, SM-S928B oder Samsung Galaxy S24 Ultra", 4 | "error": "Fehler: ", 5 | "screenshot": "Screenshot", 6 | "screenshot_success": "Screenshot erfolgreich gespeichert!", 7 | "screenshot_text": "Bitte lade hier den Screenshot von dem Kopplungsdialog hoch.", 8 | "select_image": "Bild auswählen:", 9 | "title": "Screenshot", 10 | "upload_screenshot": "Screenshot hochladen" 11 | } -------------------------------------------------------------------------------- /cancel/cancel.js: -------------------------------------------------------------------------------- 1 | logParticipantAction(200); 2 | 3 | btnCancelExperiment.addEventListener('click', async function () { 4 | await logParticipantAction(203); 5 | window.location.href = "/thanks/"; 6 | }); 7 | 8 | btnBackToExperiment.addEventListener('click', async function () { 9 | await logParticipantAction(201); 10 | window.history.back(); 11 | }); 12 | 13 | btnToSurvey.addEventListener('click', async function () { 14 | await logParticipantAction(202); 15 | window.location.href = "/survey/"; 16 | }); -------------------------------------------------------------------------------- /mysql.php: -------------------------------------------------------------------------------- 1 | connect_error) { 7 | die("Connection failed: " . $conn->connect_error); 8 | } 9 | 10 | function parsePost($name) 11 | { 12 | if (isset($_POST[$name]) && $_POST[$name] !== '') { 13 | return $_POST[$name]; 14 | } 15 | return null; 16 | } 17 | 18 | function parseSelectPost($name) 19 | { 20 | if (isset($_POST[$name])) { 21 | return 1; 22 | } 23 | return 0; 24 | } -------------------------------------------------------------------------------- /debug/registerParticipant.php: -------------------------------------------------------------------------------- 1 | prepare("INSERT INTO Participants (id, task) VALUES (?, ?)"); 6 | $stmt->bind_param("si", $uniqid, $task); 7 | 8 | $uniqid = uniqid(); 9 | setcookie('participant', $uniqid, time() + 86400, '/', '', true, false); 10 | $task = parsePost('task'); 11 | if ($task != 0 && $task != 1) { 12 | $task = rand(0, 1); 13 | } 14 | setcookie('task', $task, time() + 86400, '/', '', true, false); 15 | $stmt->execute(); 16 | 17 | $stmt->close(); 18 | $conn->close(); 19 | 20 | header('Content-Type: text/plain'); 21 | echo $uniqid; -------------------------------------------------------------------------------- /screenshot/screenshot.php: -------------------------------------------------------------------------------- 1 | prepare("INSERT INTO Screenshots (participant, screenshot, filename, device_model, user_agent) VALUES (?, ?, ?, ?, ?)"); 5 | $stmt->bind_param("sbsss", $uniqid, $screenshot, $filename, $device_model, $user_agent); 6 | 7 | $uniqid = parsePost('uid'); 8 | $screenshot = file_get_contents($_FILES['screenshot']['tmp_name']); 9 | $filename = $_FILES['screenshot']['name']; 10 | $device_model = parsePost('device_model'); 11 | $user_agent = $_SERVER['HTTP_USER_AGENT']; 12 | 13 | $stmt->send_long_data(1, $screenshot); 14 | 15 | $stmt->execute(); 16 | $stmt->close(); 17 | 18 | $conn->close(); 19 | -------------------------------------------------------------------------------- /sendFile/phone/languages/en.json: -------------------------------------------------------------------------------- 1 | { 2 | "connected": "Connected", 3 | "connecting": "Connecting…", 4 | "file_uploaded": "File successfully uploaded!", 5 | "fileSuccess": "File successfully sent!\nYou can now continue on the computer.", 6 | "not_connected": "Not connected", 7 | "select_file": "Select file", 8 | "status": "Current status: ", 9 | "task": "Task", 10 | "task_description": "First follow the instructions on the computer to connect this device to the computer via Bluetooth. Then select the photo that is already on the device using the buttons below and send it to the browser via Bluetooth by pressing the \"Send file via Bluetooth\" button.", 11 | "title": "File send", 12 | "upload_file": "Send file via Bluetooth" 13 | } -------------------------------------------------------------------------------- /debug/setParticipantID.php: -------------------------------------------------------------------------------- 1 | prepare("SELECT task FROM Participants WHERE id = ?"); 11 | $stmt->bind_param("s", $uid); 12 | 13 | $uid = parsePost('id'); 14 | 15 | $stmt->execute(); 16 | 17 | $result = $stmt->get_result(); 18 | if ($result->num_rows === 0) { 19 | http_response_code(400); 20 | die('Bad Request'); 21 | } 22 | $task = $result->fetch_assoc()['task']; 23 | 24 | $stmt->close(); 25 | $conn->close(); 26 | 27 | setcookie('participant', $uid, time() + 86400, '/', '', true, false); 28 | setcookie('task', $task, time() + 86400, '/', '', true, false); 29 | -------------------------------------------------------------------------------- /sendFile/phone/languages/de.json: -------------------------------------------------------------------------------- 1 | { 2 | "connected": "Verbunden", 3 | "connecting": "Verbinde…", 4 | "file_uploaded": "Datei erfolgreich hochgeladen!", 5 | "fileSuccess": "Datei erfolgreich gesendet!\nDu kannst jetzt auf dem Computer fortfahren.", 6 | "not_connected": "Nicht verbunden", 7 | "select_file": "Wähle die Datei aus", 8 | "status": "Aktueller Status: ", 9 | "task": "Aufgabe", 10 | "task_description": "Befolge zuerst die Anweisungen auf dem Computer, um dieses Gerät per Bluetooth mit dem Computer zu verbinden. Wähle anschließend das Foto aus, das sich bereits auf dem Gerät befindet, indem du die Schaltflächen unten verwendest und sende es durch Drücken des Knopfes „Datei per Bluetooth senden“ per Bluetooth an den Browser.", 11 | "title": "Datei senden", 12 | "upload_file": "Datei per Bluetooth senden" 13 | } -------------------------------------------------------------------------------- /index.js: -------------------------------------------------------------------------------- 1 | btnStartExperiment.addEventListener('click', startExperiment); 2 | btnCancelExperiment.addEventListener('click', cancelExperiment); 3 | 4 | user_study_about_text.setAttribute("data-i18n", "user_study_about_text" + getCookie("task")); 5 | summary_text.setAttribute("data-i18n", "summary_text" + getCookie("task")); 6 | 7 | async function startExperiment() { 8 | await logParticipantAction(0); 9 | if (getCookie("task") == 1) { 10 | window.location.href = "/sendFile/"; 11 | return; 12 | } 13 | window.location.href = "/control/"; 14 | } 15 | 16 | function cancelExperiment() { 17 | window.location.href = "/cancel/"; 18 | } 19 | 20 | function getCookie(cname) { 21 | let name = cname + "="; 22 | let decodedCookie = decodeURIComponent(document.cookie); 23 | let ca = decodedCookie.split(';'); 24 | for (let i = 0; i < ca.length; i++) { 25 | let c = ca[i]; 26 | while (c.charAt(0) == ' ') { 27 | c = c.substring(1); 28 | } 29 | if (c.indexOf(name) == 0) { 30 | return c.substring(name.length, c.length); 31 | } 32 | } 33 | return ""; 34 | } -------------------------------------------------------------------------------- /screenshot/screenshot.js: -------------------------------------------------------------------------------- 1 | // get -pico-background-color variable 2 | var colorLight = getComputedStyle(document.documentElement).getPropertyValue('--pico-background-color'); 3 | var colorDark = getComputedStyle(document.documentElement).getPropertyValue('--pico-color'); 4 | 5 | var qrcode = new QRCode(document.getElementById("qrcode"), { 6 | text: window.location.href, 7 | colorDark: colorDark, 8 | colorLight: colorLight, 9 | }); 10 | 11 | url.innerText = window.location.href; 12 | url.href = window.location.href; 13 | 14 | formScreenshot.addEventListener('submit', function (e) { 15 | e.preventDefault(); 16 | const data = new FormData(formScreenshot); 17 | let urlParams = new URLSearchParams(window.location.search); 18 | data.append('uid', urlParams.get('uid')); 19 | 20 | const request = new Request('screenshot.php', { 21 | method: 'POST', 22 | body: data 23 | }); 24 | 25 | fetch(request).then(response => { 26 | if (response.ok) { 27 | alert(langData['screenshot_success']); 28 | return response.blob(); 29 | } else { 30 | alert(langData['error'] + response.statusText); 31 | throw new Error('Network response was not ok.'); 32 | } 33 | }); 34 | }); -------------------------------------------------------------------------------- /survey/survey.js: -------------------------------------------------------------------------------- 1 | btnCancelExperiment.addEventListener('click', cancelExperiment); 2 | 3 | function cancelExperiment() { 4 | window.location.href = "/cancel/"; 5 | } 6 | 7 | rangeTechEx.addEventListener("input", (event) => { 8 | rangeTechExVal.textContent = event.target.value; 9 | }); 10 | 11 | bluetoothSecurity.addEventListener("input", (event) => { 12 | bluetoothSecurityVal.textContent = event.target.value; 13 | }); 14 | 15 | skipSurvey.addEventListener("click", async () => { 16 | await logParticipantAction(11); 17 | window.location.href = "/thanks/"; 18 | }); 19 | 20 | formSurvey.addEventListener("submit", async (e) => { 21 | e.preventDefault(); 22 | const log = logParticipantAction(10); 23 | 24 | const formData = new FormData(formSurvey); 25 | 26 | const request = new Request("survey.php", { 27 | method: "POST", 28 | body: formData 29 | }); 30 | 31 | const response = fetch(request); 32 | Promise.all([log, response]).then((values) => { 33 | if (values[1].ok) { 34 | window.location.href = "/thanks/"; 35 | } else { 36 | localStorage.setItem("survey", JSON.stringify(Object.fromEntries(formData))); 37 | window.location.href = "/error/"; 38 | } 39 | }); 40 | }); -------------------------------------------------------------------------------- /thanks/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 |
15 | 24 |
25 | 26 |
27 | 28 |

29 |
30 |

31 | 32 |
33 | 34 | 35 | 36 | 37 | -------------------------------------------------------------------------------- /sendFile/languages/en.json: -------------------------------------------------------------------------------- 1 | { 2 | "btn_cancel_experiment": "Cancel experiment", 3 | "btn_task_done": "Task completed", 4 | "btn_task_not_done": "Task could not be completed", 5 | "dialog_bt_guide": "Guide", 6 | "dialog_bt_guide_step1": "Open the Bluetooth settings on the smartphone.", 7 | "dialog_bt_guide_step2": "Connect the smartphone to the device with the name ", 8 | "dialog_btn_cancel": "Cancel", 9 | "dialog_btn_go_to_task": "Go to the task", 10 | "dialog_btn_waiting_for_connection": "Waiting for connection…", 11 | "dialog_header": "🛜 Bluetooth connection", 12 | "dialog_text": "To start the task, you must first connect the smartphone to the browser via Bluetooth.", 13 | "loading": "Loading…", 14 | "pairing_code": "Pairing code", 15 | "task": "Task", 16 | "task_description": "Your task is to send a file to the browser via Bluetooth. If you no longer have the website open, go back to the website. Alternatively, you can also find a link to the website on your smartphone's home screen. Now select the photo that is already on the device using the buttons below and send it to the browser via Bluetooth by pressing the \"Send file via Bluetooth\" button.", 17 | "title": "File send" 18 | } -------------------------------------------------------------------------------- /sendFile/languages/de.json: -------------------------------------------------------------------------------- 1 | { 2 | "btn_cancel_experiment": "Experiment abbrechen", 3 | "btn_task_done": "Aufgabe erledigt", 4 | "btn_task_not_done": "Aufgabe konnte nicht erledigt werden", 5 | "dialog_bt_guide": "Anleitung", 6 | "dialog_bt_guide_step1": "Öffne die Bluetooth Einstellungen auf dem Smartphone.", 7 | "dialog_bt_guide_step2": "Verbinde das Smartphone mit dem Gerät mit dem Namen ", 8 | "dialog_btn_cancel": "Abbrechen", 9 | "dialog_btn_go_to_task": "Zur Aufgabe", 10 | "dialog_btn_waiting_for_connection": "Warte auf Verbindung…", 11 | "dialog_header": "🛜 Bluetooth Verbindung", 12 | "dialog_text": "Um die Aufgabe zu starten, musst du zuerst das Smartphone per Bluetooth mit dem Browser verbinden.", 13 | "loading": "Lade…", 14 | "pairing_code": "Kopplungscode", 15 | "task": "Aufgabe", 16 | "task_description": "Deine Aufgabe ist es, eine Datei per Bluetooth an den Browser zu senden. Falls du aktuell nicht mehr die Webseite geöffnet hast, gehe zurück zur Webseite. Alternativ findest du auch auf dem Startbildschirm des Smartphones einen Link zur Webseite. Wähle nun das Foto aus, das sich bereits auf dem Gerät befindet, indem du die Schaltflächen unten verwendest und sende es durch Drücken des Knopfes „Datei per Bluetooth senden“ per Bluetooth an den Browser.", 17 | "title": "Datei senden" 18 | } -------------------------------------------------------------------------------- /2fa-device/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | Zwei-Faktor-Authentifizierung 9 | 15 | 16 | 17 | 18 | 19 |

Zwei-Faktor-Authentifizierung

20 |
21 | 22 |

Ersteinrichtung

23 |

24 | Damit du dein Telefon zur Verifizierung von Transaktionen verwenden kannst verbinde es bitte per Bluetooth mit dem 2FA Bluetooth Bridge.
25 | Gehe dazu in die Bluetooth Einstellungen deines Smartphones und suche nach dem Gerät 2FA Bluetooth Bridge.
26 | Nachdem die Kopplung erfolgreich war, kannst du dein Telefon zur Verifizierung von Transaktionen verwenden.
27 | Anschließend findest du dann hier die zu bestätigenden Aufträge.
28 |
29 | Aktueller Status: Nicht Verbunden 30 |

31 | 32 |

Aufträge

33 |

34 | Es sind keine Aufträge vorhanden. 35 |

36 | 37 | 38 | -------------------------------------------------------------------------------- /cancel/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 |
15 | 24 |
25 | 26 |
27 | 28 |

29 |
30 |

31 | 32 | 33 | 34 | 35 | 36 |
37 | 38 | 39 | 40 | 41 | 42 | 43 | -------------------------------------------------------------------------------- /error/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 17 | 18 | 19 | 20 |
21 | 30 |
31 | 32 |
33 | 34 |

35 | 36 |

37 | 38 |
39 | 40 | 41 | 42 | 45 | 46 | 47 | -------------------------------------------------------------------------------- /TUM_Web_Logo_blau.svg: -------------------------------------------------------------------------------- 1 | 2 | image/svg+xmlTUM_Web_Logo_blau 3 | TUM_Web_Logo_blau 4 | TUM 5 | 6 | -------------------------------------------------------------------------------- /index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 |
15 | 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 | -------------------------------------------------------------------------------- /logger.js: -------------------------------------------------------------------------------- 1 | function actionIdToString(actionId) { 2 | switch (actionId) { 3 | case 0: 4 | return 'started Experiment'; 5 | case 1: 6 | return 'connected his Smartphone via Bluetooth'; 7 | case 2: 8 | return 'disconnected his Smartphone'; 9 | case 3: 10 | return 'pressed the "Go to Task" button in the dialog'; 11 | case 4: 12 | return 'pressed the cancel button in the dialog'; 13 | case 5: 14 | return 'confirmed the pairing code on his Smartphone'; 15 | case 6: 16 | return 'started remote control'; 17 | case 7: 18 | return 'stopped remote control'; 19 | case 8: 20 | return 'finished the task'; 21 | case 9: 22 | return 'could not finish the task'; 23 | case 10: 24 | return 'submitted the survey'; 25 | case 11: 26 | return 'skipped the survey'; 27 | case 200: 28 | return 'went to the cancel Experiment page'; 29 | case 201: 30 | return 'went back to the Experiment'; 31 | case 202: 32 | return 'cancelled the Experiment but went to the survey'; 33 | case 203: 34 | return 'completly cancelled the Experiment'; 35 | case 254: 36 | return 'encountered an error'; 37 | case 255: 38 | return 'completed Experiment'; 39 | default: 40 | return 'did something'; 41 | } 42 | } 43 | 44 | async function logParticipantAction(actionId) { 45 | console.log(`🕵️ Participant ${actionIdToString(actionId)}.`); 46 | 47 | const formData = new FormData(); 48 | formData.append("action", actionId); 49 | 50 | const myRequest = new Request("/logger.php", { 51 | method: "POST", 52 | body: formData 53 | }); 54 | 55 | await fetch(myRequest); 56 | } -------------------------------------------------------------------------------- /control/languages/en.json: -------------------------------------------------------------------------------- 1 | { 2 | "btn_cancel_experiment": "Cancel experiment", 3 | "btn_start_remote_control": "Start remote control", 4 | "btn_task_done": "Task completed", 5 | "btn_task_not_done": "Task could not be completed", 6 | "dialog_bt_guide": "Guide", 7 | "dialog_bt_guide_step1": "Open the Bluetooth settings on your smartphone.", 8 | "dialog_bt_guide_step2": "Enable Bluetooth.", 9 | "dialog_bt_guide_step3": "Connect your smartphone to the device with the name ", 10 | "dialog_btn_cancel": "Cancel", 11 | "dialog_btn_go_to_task": "Go to the task", 12 | "dialog_btn_waiting_for_connection": "Waiting for connection…", 13 | "dialog_header": "🛜 Bluetooth connection", 14 | "dialog_text": "To start the task, you must first connect your smartphone to the browser via Bluetooth.", 15 | "esc_hint": "You can end remote control by pressing the ", 16 | "esc_hint_ac1": " key.", 17 | "esc_hint2": "This allows you to make entries on the computer again.", 18 | "hint": "Hint", 19 | "hint_text": "On Apple devices, AssistiveTouch must be activated to enable mouse control. To do this, go to \"Settings\" > \"Accessibility\" > \"Touch\" > \"AssistiveTouch\" and activate AssistiveTouch. You will now see an AssistiveTouch button that will take you to the Home screen. AssistiveTouch can be deactivated again after the experiment.", 20 | "loading": "Loading…", 21 | "pairing_code": "Pairing code", 22 | "remote_control": "Remote control", 23 | "remote_control_explanation": "By pressing the \"Start remote control\" button, you can control your smartphone remotely via the browser. You can cancel remote control at any time by pressing the ", 24 | "remote_control_explanation_ac1": "-key on the keyboard.", 25 | "task": "Task", 26 | "task_description": "Your task is to search for the YouTube video shown below on your smartphone. You can use the YouTube app or open the YouTube website in your browser. Once you have found the video, start it and pause it after 10 seconds. When completing the task, please only use the browser to control your smartphone and do not make any entries on the smartphone itself.", 27 | "title": "Remote control" 28 | } -------------------------------------------------------------------------------- /sendFile/phone/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 |
16 | 25 |
26 | 27 |
28 | 29 |

30 |

31 | 32 |

33 | 34 | 35 | 36 |
37 | 38 | 39 | 40 |
41 | 42 |
43 | 44 | 45 | 46 | 47 | 48 | -------------------------------------------------------------------------------- /sendFile/phone/phone.js: -------------------------------------------------------------------------------- 1 | var fileUploaded = false; 2 | var connectionStatus; 3 | 4 | fetchStatus(); 5 | 6 | formFile.addEventListener('submit', function (e) { 7 | e.preventDefault(); 8 | 9 | fetch('status.php').then(response => { 10 | return response.text(); 11 | } 12 | ).then(data => { 13 | console.log(data); 14 | if (data === '3') { 15 | fileUploaded = true; 16 | btnSubmit.disabled = true; 17 | fakeUpload(); 18 | } 19 | }); 20 | }); 21 | 22 | async function fakeUpload() { 23 | progress.hidden = false; 24 | let random = Math.floor(Math.random() * 5) + 8; 25 | progress.value += random; 26 | if (progress.value < progress.max) { 27 | setTimeout(fakeUpload, 100); 28 | } 29 | else { 30 | progress.hidden = true; 31 | btnSubmit.disabled = false; 32 | fileUploaded = true; 33 | fileUploadedText.hidden = false; 34 | notConnected.hidden = true; 35 | connecting.hidden = true; 36 | connected.hidden = true; 37 | alert(langData['fileSuccess']); 38 | progress.value = 0; 39 | } 40 | } 41 | 42 | async function fetchStatus() { 43 | let response; 44 | let data; 45 | try { 46 | response = await fetch('status.php'); 47 | data = await response.text(); 48 | } 49 | catch (error) { 50 | console.error('Error:', error); 51 | } 52 | connectionStatus = data; 53 | if (fileUploaded) { 54 | return; 55 | } 56 | switch (data) { 57 | case '5': 58 | notConnected.hidden = true; 59 | connecting.hidden = false; 60 | connected.hidden = true; 61 | btnSubmit.disabled = true; 62 | break; 63 | case '3': 64 | notConnected.hidden = true; 65 | connecting.hidden = true; 66 | connected.hidden = false; 67 | btnSubmit.disabled = false; 68 | break; 69 | default: 70 | notConnected.hidden = false; 71 | connecting.hidden = true; 72 | connected.hidden = true; 73 | btnSubmit.disabled = true; 74 | } 75 | setTimeout(fetchStatus, 1000); 76 | } -------------------------------------------------------------------------------- /screenshot/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 22 | 23 | 24 | 25 |
26 | 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 | -------------------------------------------------------------------------------- /i18n.js: -------------------------------------------------------------------------------- 1 | var langData = {}; 2 | 3 | // Function to update content based on selected language 4 | function updateContent(langData) { 5 | document.querySelectorAll('[data-i18n]').forEach(element => { 6 | const key = element.getAttribute('data-i18n'); 7 | let childs = 0; 8 | if (element.getAttribute('data-i18n-childs')) { 9 | childs = element.getAttribute('data-i18n-childs'); 10 | } 11 | if (langData[key] === undefined) { 12 | console.warn(`Translation not found for key: ${key}`); 13 | return; 14 | } 15 | 16 | if (element.tagName === "INPUT") { 17 | if (element.type === "text") { 18 | element.placeholder = langData[key]; 19 | } else { 20 | element.value = langData[key]; 21 | } 22 | return; 23 | } 24 | element.firstChild.textContent = langData[key]; 25 | for (let i = 2; i <= childs * 2; i += 2) { 26 | let j = i / 2; 27 | if (i < element.childNodes.length) { 28 | if (element.childNodes[i].nodeType === 3) { // Text node 29 | element.childNodes[i].textContent = langData[key + "_ac" + j]; 30 | } else { 31 | element.childNodes[i].before(langData[key + "_ac" + j]); 32 | } 33 | } else { 34 | element.append(langData[key + "_ac" + j]); 35 | } 36 | } 37 | }); 38 | } 39 | 40 | // Function to set the language preference 41 | function setLanguagePreference(lang) { 42 | localStorage.setItem('language', lang); 43 | } 44 | 45 | // Function to fetch language data 46 | async function fetchLanguageData(lang) { 47 | const response = await fetch(`languages/${lang}.json`); 48 | return response.json(); 49 | } 50 | 51 | // Function to change language 52 | async function changeLanguage(lang) { 53 | setLanguagePreference(lang); 54 | 55 | langData = await fetchLanguageData(lang); 56 | updateContent(langData); 57 | } 58 | 59 | // Call updateContent() on page load 60 | window.onload = async () => { 61 | const userPreferredLanguage = localStorage.getItem('language') || 'en'; 62 | langData = await fetchLanguageData(userPreferredLanguage); 63 | updateContent(langData); 64 | }; -------------------------------------------------------------------------------- /control/languages/de.json: -------------------------------------------------------------------------------- 1 | { 2 | "btn_cancel_experiment": "Experiment abbrechen", 3 | "btn_start_remote_control": "Starte Fernsteuerung", 4 | "btn_task_done": "Aufgabe erledigt", 5 | "btn_task_not_done": "Aufgabe konnte nicht erledigt werden", 6 | "dialog_bt_guide": "Anleitung", 7 | "dialog_bt_guide_step1": "Öffne die Bluetooth Einstellungen auf deinem Smartphone.", 8 | "dialog_bt_guide_step2": "Aktiviere Bluetooth.", 9 | "dialog_bt_guide_step3": "Verbinde dein Smartphone mit dem Gerät mit dem Namen ", 10 | "dialog_btn_cancel": "Abbrechen", 11 | "dialog_btn_go_to_task": "Zur Aufgabe", 12 | "dialog_btn_waiting_for_connection": "Warte auf Verbindung…", 13 | "dialog_header": "🛜 Bluetooth Verbindung", 14 | "dialog_text": "Um die Aufgabe zu starten, musst du zuerst dein Smartphone per Bluetooth mit dem Browser verbinden.", 15 | "esc_hint": "Durch Drücken der ", 16 | "esc_hint_ac1": "-Taste kannst du die Fernsteuerung beenden.", 17 | "esc_hint2": "Somit kannst du wieder Eingaben auf dem Computer machen.", 18 | "hint": "Hinweis", 19 | "hint_text": "Auf Apple Geräten muss AssistiveTouch aktiviert werden, um die Steuerung der Maus zu ermöglichen. Gehe dazu in die „Einstellungen“ > „Bedienungshilfen“ > „Tippen“ > „AssistiveTouch“ und aktiviere AssistiveTouch. Nun wird dir eine AssistiveTouch Taste angezeigt, mit der du zum Home Bildschirm kommst. AssistiveTouch kann nach dem Experiment wieder deaktiviert werden.", 20 | "loading": "Lade…", 21 | "pairing_code": "Kopplungscode", 22 | "remote_control": "Fernsteuerung", 23 | "remote_control_explanation": "Durch das Drücken des Knopfes „Starte Fernsteuerung“ kannst du dein Smartphone über den Browser fernsteuern. Die Fernsteuerung kannst du jederzeit durch das Drücken der ", 24 | "remote_control_explanation_ac1": "-Taste auf der Tastatur beenden.", 25 | "task": "Aufgabe", 26 | "task_description": "Deine Aufgabe ist es auf deinem Smartphone nach dem YouTube-Video zu suchen, das dir unten angezeigt wird. Du kannst dazu die YouTube-App verwenden oder die YouTube-Webseite im Browser öffnen. Wenn du das Video gefunden hast, starte es und pausiere es nach 10 Sekunden. Bitte verwende beim Durchführen der Aufgabe ausschließlich den Browser zum Steuern deines Smartphones und mache keine Eingaben auf dem Smartphone selbst.", 27 | "title": "Fernsteuerung" 28 | } -------------------------------------------------------------------------------- /webSerial.js: -------------------------------------------------------------------------------- 1 | class WebSerialPort { 2 | constructor() { 3 | this.port = new Promise((resolve, reject) => { 4 | navigator.serial.getPorts().then(async (ports) => { 5 | if (ports.length === 0) { 6 | reject("No ports available"); 7 | } else { 8 | console.log("Ports: ", ports); 9 | let port = ports[0]; 10 | await port.open({ baudRate: 115200 }); 11 | resolve(port); 12 | } 13 | }); 14 | }); 15 | 16 | this.startReader(); 17 | } 18 | 19 | async getPort() { 20 | return this.port; 21 | } 22 | 23 | async startReader() { 24 | let port = await this.port; 25 | let buffer = ''; 26 | while (port.readable) { 27 | const reader = port.readable.getReader(); 28 | try { 29 | while (true) { 30 | const { value, done } = await reader.read(); 31 | if (done) { 32 | // |reader| has been canceled. 33 | break; 34 | } 35 | 36 | const eventOnData = new CustomEvent("ondata", { detail: value }); 37 | port.dispatchEvent(eventOnData); 38 | 39 | for (const byte of new Uint8Array(value)) { 40 | buffer += String.fromCharCode(byte); 41 | if (byte === 10) { // newline 42 | console.debug("📩 ", buffer); 43 | const eventOnLine = new CustomEvent("online", { detail: buffer }); 44 | port.dispatchEvent(eventOnLine); 45 | buffer = ''; 46 | } 47 | } 48 | } 49 | } catch (error) { 50 | // Handle |error|… 51 | } finally { 52 | reader.releaseLock(); 53 | } 54 | } 55 | } 56 | 57 | writeToPort(data) { 58 | this.port.then((port) => { 59 | const writer = port.writable.getWriter(); 60 | const encoder = new TextEncoder(); 61 | console.debug("📤 ", data); 62 | writer.write(encoder.encode(data)); 63 | writer.releaseLock(); 64 | }); 65 | } 66 | } 67 | 68 | navigator.serial.addEventListener("connect", (e) => { 69 | console.log("Connected with port"); 70 | }); 71 | 72 | navigator.serial.addEventListener("disconnect", (e) => { 73 | console.log("Disconnected with port"); 74 | window.location.href = "/error/"; 75 | }); 76 | -------------------------------------------------------------------------------- /task.js: -------------------------------------------------------------------------------- 1 | var connected = false; 2 | 3 | const webSerialPort = new WebSerialPort(); 4 | 5 | btnCancelExperiment.addEventListener('click', cancelExperiment); 6 | dialogClose.addEventListener('click', closeDialog); 7 | dialogBtnCancel.addEventListener('click', closeDialog); 8 | dialogBtnGoToTask.addEventListener('click', goToTask); 9 | 10 | restartESP(); 11 | 12 | async function closeDialog() { 13 | await logParticipantAction(4); 14 | window.location.href = "/"; 15 | } 16 | 17 | webSerialPort.getPort().then((port) => { 18 | port.addEventListener('online', async (e) => { 19 | if (e.detail.startsWith("Connected")) { 20 | await logParticipantAction(1); 21 | connected = true; 22 | } 23 | if (e.detail.startsWith("The passkey YES/NO number:")) { 24 | let passkey = e.detail.split(":")[1].trim(); 25 | pairingCodeNumber.innerText = Math.floor(Math.random() * 900000) + 100000; 26 | while (passkey === pairingCode.innerText) { 27 | pairingCodeNumber.innerText = Math.floor(Math.random() * 900000) + 100000; 28 | } 29 | pairingCode.hidden = false; 30 | pairingCodeNumber.hidden = false; 31 | } 32 | if (e.detail.startsWith("Authentication Complete") && connected) { 33 | dialogBtnWaitingForConnection.hidden = true; 34 | dialogBtnGoToTask.hidden = false; 35 | setTimeout(async () => { 36 | if (connected) { 37 | await logParticipantAction(5); 38 | dialogBtnGoToTask.disabled = false; 39 | } 40 | }, 3000); 41 | } 42 | if (e.detail.startsWith("Disconnected")) { 43 | await logParticipantAction(2); 44 | connected = false; 45 | btDialog.show(); 46 | restartESP(); 47 | pairingCode.hidden = true; 48 | pairingCodeNumber.hidden = true; 49 | dialogBtnWaitingForConnection.hidden = false; 50 | dialogBtnGoToTask.hidden = true; 51 | dialogBtnGoToTask.disabled = true; 52 | document.exitPointerLock(); 53 | } 54 | }); 55 | }); 56 | 57 | function restartESP() { 58 | console.info("♻️ Restarting ESP32"); 59 | webSerialPort.writeToPort('\x1B'); 60 | } 61 | 62 | async function goToTask() { 63 | await logParticipantAction(3); 64 | btDialog.close(); 65 | } 66 | 67 | btnTaskNotDone.addEventListener("click", async () => { 68 | await logParticipantAction(9); 69 | window.location.href = "/survey/"; 70 | }); 71 | 72 | btnTaskDone.addEventListener("click", async () => { 73 | logParticipantAction(8); 74 | window.location.href = "/survey/"; 75 | }); 76 | 77 | function cancelExperiment() { 78 | window.location.href = "/cancel/"; 79 | } -------------------------------------------------------------------------------- /sendFile/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 |
15 | 27 |
28 | 29 |
30 | 31 |

32 |

33 | 34 | 35 | 36 | 37 | 38 |
39 |
40 | 41 |

42 | 43 |

44 |
45 | 46 |

47 | 48 |

49 |
    50 |
    2. 51 |
  2. Web Bluetooth.
    3. 52 |
53 | 54 | 55 | 56 | 57 | 62 |
63 | 64 | 65 |
66 | 67 | 68 | 69 | 70 | 71 | 72 | 73 | -------------------------------------------------------------------------------- /languages/en.json: -------------------------------------------------------------------------------- 1 | { 2 | "btn_cancel_experiment": "Cancel Experiment", 3 | "btn_start_experiment": "Experiment starten", 4 | "summary": "Summary", 5 | "summary_text0": "Before you can start the task, you must first connect your smartphone to the browser via Bluetooth. After you have clicked on the \"Start experiment\" button, instructions will be displayed in the browser. You can then start the actual task.", 6 | "summary_text1": "Before you can start the task, you must first connect the smartphone to the browser via Bluetooth. After you have clicked on the \"Start experiment\" button, instructions will be displayed in the browser. You can then start the actual task.", 7 | "title": "Web Bluetooth Test", 8 | "user_study_about": "What is this study about?", 9 | "user_study_about_text0": "This user study is about testing the usability and compatibility of the Web Bluetooth API. To get started, you first need to connect your smartphone to the browser via Bluetooth. Instructions on how to do this are also displayed in the browser. Once the connection has been established, you can transfer all mouse and keyboard inputs that you make in the browser to your smartphone. You can therefore control and access your entire smartphone via the browser. The browser will now give you a small task to complete using the browser controls. When carrying out the task, please only use the browser to control your smartphone and do not make any entries on the smartphone itself. When completing the task, pay attention to the ease of use and factors such as the input delay. After completing the task, you will then be asked a short survey in which you will be asked questions about your experiences during the user study. You do not have to answer every question, you can also leave questions unanswered that you do not want to answer. You are free to stop the trial whenever you feel it is appropriate. For example, if you get stuck at any point. There is also always a “Cancel experiment” button at the top center, which you can use to go straight to the final survey or cancel the experiment altogether. I will now leave the room. As soon as you have finished, simply leave the room. There is no time limit, so you can take as much time as you like. Do you have any questions?", 10 | "user_study_about_text1": "This user study is about testing the usability and compatibility of the Web Bluetooth API. To get started, you must first connect the smartphone to the browser via Bluetooth. Instructions on how to do this are also displayed in the browser. Once the connection has been established, the browser will give you a small task to complete. When completing the task, pay attention to the ease of use and factors such as the transmission speed. After completing the task, you will then be asked a short survey in which you will be asked questions about your experiences during the user study. You do not have to answer every question, you can also leave questions unanswered that you do not want to answer. You are free to stop the trial whenever you feel it is appropriate. For example, if you get stuck at any point. There is also always a “Cancel experiment” button at the top center which you can use to go straight to the final survey or cancel the experiment altogether. I will now leave the room. As soon as you have finished, simply leave the room. There is no time limit, so you can take as much time as you like. Do you have any questions?", 11 | "web_bluetooth_usability_test": "Web Bluetooth Usability Test" 12 | } -------------------------------------------------------------------------------- /survey/survey.php: -------------------------------------------------------------------------------- 1 | prepare("INSERT INTO Survey (participant, age, gender, num_electronic_devices, regular_tablet_laptop_use, technical_experience, encountered_problems, bt_pairing_problems, problems_explaination, bluetooth_security, situation_already_encountered, know_pairing_code, improvements, additional_thoughts) VALUES (?, ?, ?, ?, ?, ?, ?, ?, ?, ?, ?, ?, ?, ?)"); 5 | $stmt->bind_param("siiiiiiisiiiss", $uniqid, $age, $gender, $num_electronic_devices, $regular_tablet_laptop_use, $technical_experience, $encountered_problems, $bt_pairing_problems, $problems_explaination, $bluetooth_security, $situation_already_encountered, $know_pairing_code, $improvements, $additional_thoughts); 6 | 7 | $uniqid = $_COOKIE['participant']; 8 | $age = parsePost('age'); 9 | $gender = parsePost('gender'); 10 | $num_electronic_devices = parsePost('num_electronic_devices'); 11 | $regular_tablet_laptop_use = parsePost('regular_tablet_laptop_use'); 12 | $technical_experience = parsePost('technical_experience'); 13 | $encountered_problems = parsePost('encountered_problems'); 14 | $bt_pairing_problems = parsePost('bt_pairing_problems'); 15 | $problems_explaination = parsePost('problems_explaination'); 16 | $bluetooth_security = parsePost('bluetooth_security'); 17 | $situation_already_encountered = parsePost('situation_already_encountered'); 18 | $know_pairing_code = parsePost('know_pairing_code'); 19 | $improvements = parsePost('improvements'); 20 | $additional_thoughts = parsePost('additional_thoughts'); 21 | 22 | $stmt->execute(); 23 | $stmt->close(); 24 | 25 | 26 | $stmt = $conn->prepare("INSERT INTO electronic_devices_main_application (participant, social_media, communication, entertainment, work_and_productivity, information_search, organization_and_planning, navigation_and_maps, health_and_fitness, smart_home) VALUES (?, ?, ?, ?, ?, ?, ?, ?, ?, ?)"); 27 | $stmt->bind_param("siiiiiiiii", $uniqid, $social_media, $communication, $entertainment, $work_and_productivity, $information_search, $organization_and_planning, $navigation_and_maps, $health_and_fitness, $smart_home); 28 | 29 | $prefix = 'electronic_devices_main_application_'; 30 | $social_media = parseSelectPost($prefix . 'social_media'); 31 | $communication = parseSelectPost($prefix . 'communication'); 32 | $entertainment = parseSelectPost($prefix . 'entertainment'); 33 | $work_and_productivity = parseSelectPost($prefix . 'work_and_productivity'); 34 | $information_search = parseSelectPost($prefix . 'information_search'); 35 | $organization_and_planning = parseSelectPost($prefix . 'organization_and_planning'); 36 | $navigation_and_maps = parseSelectPost($prefix . 'navigation_and_maps'); 37 | $health_and_fitness = parseSelectPost($prefix . 'health_and_fitness'); 38 | $smart_home = parseSelectPost($prefix . 'smart_home'); 39 | 40 | $stmt->execute(); 41 | $stmt->close(); 42 | 43 | 44 | $stmt = $conn->prepare("INSERT INTO bt_devices (participant, car, smartwatches_fitness_trackers, headphones, keyboard_mouse, others) VALUES (?, ?, ?, ?, ?, ?)"); 45 | $stmt->bind_param("siiiii", $uniqid, $car, $smartwatches_fitness_trackers, $headphones, $keyboard_mouse, $others); 46 | 47 | $prefix = 'bt_devices_'; 48 | $car = parseSelectPost($prefix . 'car'); 49 | $smartwatches_fitness_trackers = parseSelectPost($prefix . 'smartwatches_fitness_trackers'); 50 | $headphones = parseSelectPost($prefix . 'headphones'); 51 | $keyboard_mouse = parseSelectPost($prefix . 'keyboard_mouse'); 52 | $others = parseSelectPost($prefix . 'others'); 53 | 54 | $stmt->execute(); 55 | $stmt->close(); 56 | 57 | $conn->close(); 58 | 59 | echo 'Thank you for participating in our survey!'; -------------------------------------------------------------------------------- /survey/languages/en.json: -------------------------------------------------------------------------------- 1 | { 2 | "additional_thoughts": "Do you have any additional thoughts or comments you would like to share with us?", 3 | "age": "Age", 4 | "bluetooth_security_1_to_5": "On a scale of 1 to 5, how secure do you think Bluetooth connections are? (1 is not secure, 5 is very secure)", 5 | "bt_pairing_problems": "Did the Bluetooth pairing with your smartphone work without any problems?", 6 | "btn_cancel_experiment": "Cancel Experiment", 7 | "can_anything_be_improved": "Is there anything that could be improved?", 8 | "car": "Car / hands-free system", 9 | "communication": "Communication (e-mail / calls / text messages)", 10 | "demographics": "Demographics", 11 | "encountered_problems": "Have you encountered any problems?", 12 | "entertainment": "Entertainment (videos / music / games)", 13 | "experiment": "Experiment", 14 | "female": "Female", 15 | "gender": "Gender", 16 | "gender_select": "Select your gender…", 17 | "headphones": "Headphones", 18 | "health_and_fitness": "Health and fitness (smartwatches / fitness trackers)", 19 | "how_many_electronic_devices": "How many electronic devices do you use every day?", 20 | "how_many_electronic_devices_hint": "This refers to devices such as tablets, PCs, smartphones, smartwatches, laptops, e-readers, fitness trackers and similar technologies. It does not include simple household appliances such as toasters, hair dryers or blenders.", 21 | "if_encountered_problems_explain": "If you have encountered any problems, please explain them here.", 22 | "information_search": "Information search", 23 | "keyboard_mouse": "Keyboard / mouse", 24 | "know_pairing_code": "Do you know what the pairing code is used for during Bluetooth pairing?", 25 | "know_pairing_code_hint": "If you do not know what this means, please select “No”.", 26 | "loading": "Loading…", 27 | "male": "Male", 28 | "navigation_and_maps": "Navigation and maps", 29 | "no": "No", 30 | "organization_and_planning": "Organization and planning (calendar / notes / reminders)", 31 | "other": "Other", 32 | "others": "Others", 33 | "regularly_tablet_laptop_use": "Do you regularly use a Tablet or Laptop at work / university?", 34 | "situation_already_encountered": "Have you ever encountered a situation like the one in the experiment in your private life?", 35 | "skip_survey": "Skip survey", 36 | "smart_home": "Smart Home", 37 | "smartwatches_fitness_trackers": "Smartwatches / fitness trackers", 38 | "social_media": "Social media", 39 | "submit_survey": "Submit survey", 40 | "survey": "Survey", 41 | "survey_text": "Finally, please answer the following questions. Your answers are anonymous and will be treated confidentially. If you do not wish to answer a question, you can skip it.", 42 | "technical_experience": "Technical Experience", 43 | "technical_experience_1_to_5": "On a scale from 1 to 5, how experienced would you rate yourself with technical devices? (1 is no experience, 5 is expert)", 44 | "title": "Survey", 45 | "value": "Value: ", 46 | "what_bt_devices_do_you_use": "Which Bluetooth devices do you use regularly?", 47 | "what_is_main_application_for_electronic_devices": "What is your main application for electronic devices?", 48 | "work_and_productivity": "Work and productivity", 49 | "yes": "Yes", 50 | "yes_completely": "Yes, I have already controlled my smartphone via Bluetooth from a browser.", 51 | "yes_only_browser": "I have already connected my smartphone to a browser via Bluetooth.", 52 | "yes_pairing": "I have already paired my phone with another device using Bluetooth." 53 | } -------------------------------------------------------------------------------- /survey/languages/de.json: -------------------------------------------------------------------------------- 1 | { 2 | "additional_thoughts": "Hast du sonst noch Gedanken oder Anmerkungen, die du mit uns teilen möchtest?", 3 | "age": "Alter", 4 | "bluetooth_security_1_to_5": "Auf einer Skala von 1 bis 5, wie sicher denkst du sind Bluetooth-Verbindungen? (1 ist nicht sicher, 5 ist sehr sicher)", 5 | "bt_pairing_problems": "Hat die Bluetooth-Kopplung mit deinem Smartphone problemlos funktioniert?", 6 | "btn_cancel_experiment": "Experiment abbrechen", 7 | "can_anything_be_improved": "Gibt es deiner Meinung nach Verbesserungsmöglichkeiten?", 8 | "car": "Auto / Freisprechanlage", 9 | "communication": "Kommunikation (E-Mail / Anrufe / Textnachrichten)", 10 | "demographics": "Demografische Informationen", 11 | "encountered_problems": "Bist du auf irgendwelche Probleme gestoßen?", 12 | "entertainment": "Unterhaltung (Videos / Musik / Spiele)", 13 | "experiment": "Experiment", 14 | "female": "Weiblich", 15 | "gender": "Geschlecht", 16 | "gender_select": "Wähle dein Geschlecht aus…", 17 | "headphones": "Kopfhörer", 18 | "health_and_fitness": "Gesundheit und Fitness (Smartwatches/Fitness-Tracker)", 19 | "how_many_electronic_devices": "Wie viele elektronische Geräte benutzt du jeden Tag?", 20 | "how_many_electronic_devices_hint": "Gemeint sind Geräte wie Tablets, PCs, Smartphones, Smartwatches, Laptops, E-Reader, Fitness-Tracker und ähnliche Technologien. Nicht gemeint sind einfache Haushaltsgeräte wie Toaster, Föhn oder Mixer.", 21 | "if_encountered_problems_explain": "Wenn du auf Probleme gestoßen bist, erläutere diese bitte hier.", 22 | "information_search": "Informationssuche", 23 | "keyboard_mouse": "Tastatur / Maus", 24 | "know_pairing_code": "Weißt du, wofür der Kopplungscode bei der Bluetooth-Kopplung verwendet wird?", 25 | "know_pairing_code_hint": "Wenn du nicht weißt, was das bedeutet, wähle bitte „Nein“.", 26 | "loading": "Lade…", 27 | "male": "Männlich", 28 | "navigation_and_maps": "Navigation und Karten", 29 | "no": "Nein", 30 | "organization_and_planning": "Organisation und Planung (Kalender / Notizen / Erinnerungen)", 31 | "other": "Anderes", 32 | "others": "Andere", 33 | "regularly_tablet_laptop_use": "Verwendest du regelmäßig ein Tablet oder einen Laptop bei der Arbeit / in der Universität?", 34 | "situation_already_encountered": "Bist du in deinem Privatleben schon einmal mit einer Situation wie in diesem Experiment konfrontiert worden?", 35 | "skip_survey": "Umfrage überspringen", 36 | "smart_home": "Smart Home", 37 | "smartwatches_fitness_trackers": "Smartwatches / Fitness-Tracker", 38 | "social_media": "Soziale Medien", 39 | "submit_survey": "Umfrage abschicken", 40 | "survey": "Umfrage", 41 | "survey_text": "Bitte beantworte abschließend die folgenden Fragen. Deine Antworten sind anonym und werden vertraulich behandelt. Wenn du eine Frage nicht beantworten möchtest, kannst du sie überspringen.", 42 | "technical_experience": "Technische Erfahrung", 43 | "technical_experience_1_to_5": "Auf einer Skala von 1 bis 5, wie erfahren würdest du dich im Umgang mit technischen Geräten einschätzen? (1 ist keine Erfahrung, 5 ist Experte)", 44 | "title": "Umfrage", 45 | "value": "Wert: ", 46 | "what_bt_devices_do_you_use": "Welche Bluetooth-Geräte verwendest du regelmäßig?", 47 | "what_is_main_application_for_electronic_devices": "Was ist dein Haupteinsatzgebiet für elektronische Geräte?", 48 | "work_and_productivity": "Arbeit und Produktivität", 49 | "yes": "Ja", 50 | "yes_completely": "Ja, ich habe mein Smartphone bereits per Bluetooth von einem Browser aus gesteuert.", 51 | "yes_only_browser": "Ich habe mein Smartphone bereits per Bluetooth mit einem Browser verbunden.", 52 | "yes_pairing": "Ich habe mein Smartphone bereits über Bluetooth mit einem anderen Gerät gekoppelt." 53 | } -------------------------------------------------------------------------------- /languages/de.json: -------------------------------------------------------------------------------- 1 | { 2 | "btn_cancel_experiment": "Experiment abbrechen", 3 | "btn_start_experiment": "Experiment starten", 4 | "summary": "Zusammenfassung", 5 | "summary_text0": "Bevor du mit der Aufgabe beginnen kannst, musst du zuerst dein Smartphone per Bluetooth mit dem Browser verbinden. Nachdem du auf den Knopf „Experiment starten“ geklickt hast, wird dir dazu eine Anleitung im Browser angezeigt. Danach kannst du mit der eigentlichen Aufgabe anfangen.", 6 | "summary_text1": "Bevor du mit der Aufgabe beginnen kannst, musst du zuerst das Smartphone per Bluetooth mit dem Browser verbinden. Nachdem du auf den Knopf „Experiment starten“ geklickt hast, wird dir dazu eine Anleitung im Browser angezeigt. Danach kannst du mit der eigentlichen Aufgabe anfangen.", 7 | "title": "Web Bluetooth Test", 8 | "user_study_about": "Worum geht es in dieser Studie?", 9 | "user_study_about_text0": "In dieser User Study geht es darum die Nutzbarkeit und Kompatibilität der Web Bluetooth API zu testen. Damit es losgehen kann, musst du zuerst dein Smartphone mit dem Browser per Bluetooth verbinden. Eine Anleitung dazu wird dir auch nochmal im Browser angezeigt. Nachdem die Verbindung hergestellt wurde, kannst du alle Maus und Tastatureingaben, die du im Browser tätigst, an dein Smartphone übertragen lassen. Du kannst also dein komplettes Smartphone über den Browser steuern auf darauf zugreifen. Nun wird dir vom Browser eine kleine Aufgabe gegeben, die du mittels der Steuerung durch den Browser erledigen sollst. Bitte verwende beim Durchführen der Aufgabe ausschließlich den Browser zum Steuern deines Smartphones und mache keine Eingaben auf dem Smartphone selbst. Achte beim Erledigen der Aufgabe auf die Einfachheit der Nutzbarkeit und Faktoren wie die Eingabeverzögerung. Nach dem Durchführen der Aufgabe kommt dann abschließend noch eine kleine Umfrage, in der dir Fragen zu deinen Erfahrungen gestellt werden, die du während der User Study gesammelt hast. Du musst nicht jede Frage beantworten, du kannst auch Fragen unbeantwortet lassen, die du nicht beantworten willst. Es steht dir frei, den Versuch abzubrechen, wann immer du es für angebracht hältst. Zum Beispiel, wenn du an irgendeinem Punkt nicht mehr weiter kommst. Es ist auch immer oben in der Mitte ein Knopf „Experiment abbrechen“ mit dem du sofort zur abschließenden Umfrage kommst oder das Experiment ganz abbrechen kannst. Ich werde jetzt den Raum verlassen. Sobald du fertig bist, verlasse dann einfach auch den Raum. Es gibt kein Zeitlimit, also kannst du dir so viel Zeit lassen wie du willst. Hast du noch irgendwelche Fragen?", 10 | "user_study_about_text1": "In dieser User Study geht es darum die Nutzbarkeit und Kompatibilität der Web Bluetooth API zu testen. Damit es losgehen kann, musst du zuerst das Smartphone mit dem Browser per Bluetooth verbinden. Eine Anleitung dazu wird dir auch nochmal im Browser angezeigt. Nachdem die Verbindung hergestellt wurde, wird dir vom Browser eine kleine Aufgabe gegeben, die du erledigen sollst. Achte beim Erledigen der Aufgabe auf die Einfachheit der Nutzbarkeit und Faktoren wie die Übertragungsgeschwindigkeit. Nach dem Durchführen der Aufgabe kommt dann abschließend noch eine kleine Umfrage, in der dir Fragen zu deinen Erfahrungen gestellt werden, die du während der User Study gesammelt hast. Du musst nicht jede Frage beantworten, du kannst auch Fragen unbeantwortet lassen, die du nicht beantworten willst. Es steht dir frei, den Versuch abzubrechen, wann immer du es für angebracht hältst. Zum Beispiel, wenn du an irgendeinem Punkt nicht mehr weiter kommst. Es ist auch immer oben in der Mitte ein Knopf „Experiment abbrechen“ mit dem du sofort zur abschließenden Umfrage kommst oder das Experiment ganz abbrechen kannst. Ich werde jetzt den Raum verlassen. Sobald du fertig bist, verlasse dann einfach auch den Raum. Es gibt kein Zeitlimit, also kannst du dir so viel Zeit lassen wie du willst. Hast du noch irgendwelche Fragen?", 11 | "web_bluetooth_usability_test": "Web Bluetooth Nutzbarkeitstest" 12 | } -------------------------------------------------------------------------------- /debug/createTables.php: -------------------------------------------------------------------------------- 1 | query($sql) === TRUE) { 13 | echo "Table Participants created successfully\n"; 14 | } else { 15 | echo "Error creating table: " . $conn->error . "\n"; 16 | } 17 | 18 | // sql to create table Survey 19 | $sql = "CREATE TABLE Survey ( 20 | participant CHAR(13) NOT NULL PRIMARY KEY, 21 | age TINYINT UNSIGNED, 22 | gender BOOLEAN, 23 | num_electronic_devices TINYINT UNSIGNED, 24 | regular_tablet_laptop_use BOOLEAN, 25 | technical_experience TINYINT UNSIGNED, 26 | encountered_problems BOOLEAN, 27 | bt_pairing_problems BOOLEAN, 28 | problems_explaination TEXT, 29 | bluetooth_security TINYINT UNSIGNED, 30 | situation_already_encountered TINYINT UNSIGNED, 31 | know_pairing_code BOOLEAN, 32 | improvements TEXT, 33 | additional_thoughts TEXT, 34 | FOREIGN KEY (participant) REFERENCES Participants(id) ON DELETE CASCADE)"; 35 | 36 | if ($conn->query($sql) === TRUE) { 37 | echo "Table Survey created successfully\n"; 38 | } else { 39 | echo "Error creating table: " . $conn->error . "\n"; 40 | } 41 | 42 | 43 | // sql to create table electronic_devices_main_application 44 | $sql = "CREATE TABLE electronic_devices_main_application ( 45 | participant CHAR(13) NOT NULL PRIMARY KEY, 46 | social_media BOOLEAN NOT NULL, 47 | communication BOOLEAN NOT NULL, 48 | entertainment BOOLEAN NOT NULL, 49 | work_and_productivity BOOLEAN NOT NULL, 50 | information_search BOOLEAN NOT NULL, 51 | organization_and_planning BOOLEAN NOT NULL, 52 | navigation_and_maps BOOLEAN NOT NULL, 53 | health_and_fitness BOOLEAN NOT NULL, 54 | smart_home BOOLEAN NOT NULL, 55 | FOREIGN KEY (participant) REFERENCES Survey(participant) ON DELETE CASCADE)"; 56 | 57 | if ($conn->query($sql) === TRUE) { 58 | echo "Table electronic_devices_main_application created successfully\n"; 59 | } else { 60 | echo "Error creating table: " . $conn->error . "\n"; 61 | } 62 | 63 | // sql to create table bt_devices 64 | $sql = "CREATE TABLE bt_devices ( 65 | participant CHAR(13) NOT NULL PRIMARY KEY, 66 | car BOOLEAN NOT NULL, 67 | smartwatches_fitness_trackers BOOLEAN NOT NULL, 68 | headphones BOOLEAN NOT NULL, 69 | keyboard_mouse BOOLEAN NOT NULL, 70 | others BOOLEAN NOT NULL, 71 | FOREIGN KEY (participant) REFERENCES Survey(participant) ON DELETE CASCADE)"; 72 | 73 | if ($conn->query($sql) === TRUE) { 74 | echo "Table bt_devices created successfully\n"; 75 | } else { 76 | echo "Error creating table: " . $conn->error . "\n"; 77 | } 78 | 79 | // sql to create table action_log 80 | $sql = "CREATE TABLE action_log ( 81 | participant CHAR(13) NOT NULL, 82 | action TINYINT UNSIGNED NOT NULL, 83 | date TIMESTAMP NOT NULL DEFAULT CURRENT_TIMESTAMP, 84 | FOREIGN KEY (participant) REFERENCES Participants(id) ON DELETE CASCADE)"; 85 | 86 | if ($conn->query($sql) === TRUE) { 87 | echo "Table action_log created successfully\n"; 88 | } else { 89 | echo "Error creating table: " . $conn->error . "\n"; 90 | } 91 | 92 | // sql to create table Screenshots 93 | $sql = "CREATE TABLE Screenshots ( 94 | participant CHAR(13) NOT NULL PRIMARY KEY, 95 | screenshot MEDIUMBLOB NOT NULL, 96 | filename TINYTEXT NOT NULL, 97 | device_model TINYTEXT NOT NULL, 98 | user_agent TEXT NOT NULL, 99 | date TIMESTAMP NOT NULL DEFAULT CURRENT_TIMESTAMP, 100 | FOREIGN KEY (participant) REFERENCES Participants(id) ON DELETE CASCADE)"; 101 | 102 | if ($conn->query($sql) === TRUE) { 103 | echo "Table Screenshots created successfully\n"; 104 | } else { 105 | echo "Error creating table: " . $conn->error . "\n"; 106 | } 107 | 108 | $conn->close(); 109 | -------------------------------------------------------------------------------- /debug/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | Debug 13 | 14 | 15 | 16 | 17 |
18 | 36 |
37 | 38 |
39 | 40 |

Debug

41 | 42 |

Terminal

43 |
44 | 45 | 46 |

Participant Management

47 | Here you can manage the participants of the study.
48 | Current ID: 49 | Current Task: 50 |

Register new Participant

51 |
52 |
53 | 54 |
55 |
56 | 63 |
64 |
65 |

Participant List

66 | 67 | 68 | 69 | 70 | 71 | 72 | 73 | 74 | 75 | 76 | 77 | 78 | 79 |
IDtaskreg_date
80 | 81 |

Action Log

82 | 86 | 87 | 88 | 89 | 90 | 91 | 92 | 93 | 94 | 95 | 96 |
IDactiondate
97 | 98 |

Password Hash Generator

99 |
100 | 101 | 102 | 103 |
104 | Hash: 105 |
106 | 107 | 108 | 109 | 110 | 111 | 112 | 113 | -------------------------------------------------------------------------------- /control/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 31 | 32 | 33 | 34 |
35 | 47 |
48 | 49 |
50 | 51 |

52 |
53 | 54 |

ESC

55 | 56 |
57 |

58 |

59 |
60 | 61 | 62 | 63 |

64 |

65 |

66 | 67 |

68 | 69 | 70 | 71 | 72 | 77 | 78 | 79 | 80 | 81 |
82 |
83 | 84 |

85 | 86 |

87 |
88 | 89 |

90 | 91 |

92 |
    93 |
    2. 94 |
    3. 95 |
  3. Web Bluetooth.
    4. 96 |
97 | 98 | 99 | 100 | 101 | 106 |
107 | 108 | 109 |
110 | 111 | 112 | 113 | 114 | 115 | 116 | 117 | 118 | -------------------------------------------------------------------------------- /control/control.js: -------------------------------------------------------------------------------- 1 | var movementX = 0, movementY = 0, scroll = 0; 2 | var lastUpdate = 0; 3 | 4 | const canvas = document.getElementById('canvas'); 5 | 6 | btnStartRemoteControl.addEventListener('click', startRemoteControl); 7 | document.addEventListener("pointerlockchange", pointerLockChange); 8 | 9 | loadYoutubeVideo(); 10 | 11 | async function startRemoteControl() { 12 | await logParticipantAction(6); 13 | canvas.requestPointerLock(); 14 | } 15 | 16 | async function pointerLockChange() { 17 | if (document.pointerLockElement === canvas) { 18 | console.log("The pointer lock status is now locked"); 19 | document.addEventListener("mousemove", sendMousePosition); 20 | document.addEventListener("keydown", sendKey); 21 | document.addEventListener("keyup", sendKey); 22 | document.addEventListener("wheel", sendScroll); 23 | document.addEventListener("mousedown", sendMouseClick); 24 | document.addEventListener("mouseup", sendMouseClick); 25 | escHint.hidden = false; 26 | } else { 27 | await logParticipantAction(7); 28 | console.log("The pointer lock status is now unlocked"); 29 | document.removeEventListener("mousemove", sendMousePosition); 30 | document.removeEventListener("keydown", sendKey); 31 | document.removeEventListener("keyup", sendKey); 32 | document.removeEventListener("wheel", sendScroll); 33 | document.removeEventListener("mousedown", sendMouseClick); 34 | document.removeEventListener("mouseup", sendMouseClick); 35 | escHint.hidden = true; 36 | } 37 | } 38 | 39 | function sendMousePosition(e) { 40 | movementX += e.movementX; 41 | movementY += e.movementY; 42 | 43 | if (Date.now() > (lastUpdate + 10)) { 44 | let command = '`' + movementX + ',' + movementY + '\n'; 45 | webSerialPort.writeToPort(command); 46 | movementX = 0; 47 | movementY = 0; 48 | lastUpdate = Date.now(); 49 | } 50 | } 51 | 52 | function sendScroll(e) { 53 | const multiplier = -0.01; 54 | let command = '`0,0,' + e.deltaY * multiplier + '\n'; 55 | webSerialPort.writeToPort(command); 56 | } 57 | 58 | function sendMouseClick(e) { 59 | let command; 60 | let button; 61 | if (e.button === 0) { 62 | button = 'LEFT'; 63 | } else if (e.button === 2) { 64 | button = 'RIGHT'; 65 | } else { 66 | console.error("Unsupported mouse button: " + e.button); 67 | return; 68 | } 69 | 70 | if (e.type === "mousedown") { 71 | command = 'MOUSE_' + button + '_DOWN'; 72 | } else if (e.type === "mouseup") { 73 | command = 'MOUSE_' + button + '_UP'; 74 | } else { 75 | console.error("Unknown mouse event: " + e.type); 76 | return; 77 | } 78 | webSerialPort.writeToPort('`' + command + '\n'); 79 | } 80 | 81 | function sendKey(e) { 82 | e.preventDefault(); 83 | let c = e.key; 84 | if (e.key.length > 1) { 85 | c = String.fromCharCode(e.keyCode); 86 | } 87 | switch (e.key) { 88 | case "Enter": 89 | c = '\n'; 90 | break; 91 | case "Shift": 92 | c = '`KEY_LEFT_SHIFT_DOWN\n'; 93 | break; 94 | case "Control": 95 | c = '`KEY_LEFT_CTRL_DOWN\n'; 96 | break; 97 | case "Alt": 98 | c = '`KEY_LEFT_ALT_DOWN\n'; 99 | break; 100 | case "AltGraph": 101 | c = '`KEY_RIGHT_ALT_DOWN\n'; 102 | break; 103 | case "Delete": 104 | c = '`KEY_DELETE\n'; 105 | break; 106 | case "End": 107 | c = '`KEY_END\n'; 108 | break; 109 | case "ArrowUp": 110 | c = '`KEY_UP_ARROW\n'; 111 | break; 112 | case "ArrowDown": 113 | c = '`KEY_DOWN_ARROW\n'; 114 | break; 115 | case "ArrowLeft": 116 | c = '`KEY_LEFT_ARROW\n'; 117 | break; 118 | case "ArrowRight": 119 | c = '`KEY_RIGHT_ARROW\n'; 120 | break; 121 | } 122 | 123 | if (e.type === "keyup") { 124 | switch (e.key) { 125 | case "Shift": 126 | c = '`KEY_LEFT_SHIFT_UP\n'; 127 | break; 128 | case "Control": 129 | c = '`KEY_LEFT_CTRL_UP\n'; 130 | break; 131 | case "Alt": 132 | c = '`KEY_LEFT_ALT_UP\n'; 133 | break; 134 | case "AltGraph": 135 | c = '`KEY_RIGHT_ALT_UP\n'; 136 | break; 137 | default: 138 | return; 139 | } 140 | } 141 | 142 | webSerialPort.writeToPort(c); 143 | } 144 | 145 | async function loadYoutubeVideo() { 146 | const videoIds = ["LXb3EKWsInQ", "1La4QzGeaaQ", "CHSnz0bCaUk"]; 147 | const videoId = videoIds[Math.floor(Math.random() * videoIds.length)]; 148 | const url = new URL(videoId, "https://www.youtube.com/embed/"); 149 | ytVideo.src = url; 150 | } -------------------------------------------------------------------------------- /debug/debug.js: -------------------------------------------------------------------------------- 1 | var term = new Terminal(); 2 | var webSerialPort = new WebSerialPort(); 3 | var port; 4 | 5 | switchActionLog.checked = false; 6 | loadCurrentParticipant(); 7 | 8 | term.open(document.getElementById('terminal')); 9 | 10 | btnRequestPort.addEventListener("click", () => { 11 | const usbVendorId = 4292; 12 | const usbProductId = 60000; 13 | navigator.serial 14 | .requestPort({ filters: [{ usbVendorId, usbProductId }] }) 15 | .then((p) => { 16 | // Connect to `port` or add it to the list of available ports. 17 | webSerialPort = new WebSerialPort(); 18 | webSerialPort.getPort().then((port) => { 19 | port.addEventListener('ondata', (e) => { 20 | term.write(e.detail); 21 | }); 22 | }); 23 | }) 24 | .catch((e) => { 25 | // The user didn't select a port. 26 | throw e; 27 | }); 28 | }); 29 | 30 | btnReboot.addEventListener("click", () => { 31 | webSerialPort.writeToPort("\x1B"); 32 | }); 33 | 34 | term.onData((data) => { 35 | switch (data) { 36 | case "\r": 37 | data = "\r\n"; 38 | break; 39 | case "\n": 40 | data = "\r\n"; 41 | break; 42 | case "\u007F": 43 | data = "\b \b"; 44 | break; 45 | } 46 | console.log(data); 47 | webSerialPort.writeToPort(data); 48 | }); 49 | 50 | webSerialPort.getPort().then((port) => { 51 | port.addEventListener('ondata', (e) => { 52 | term.write(e.detail); 53 | }); 54 | }); 55 | 56 | btnClear.addEventListener("click", () => { 57 | term.clear(); 58 | }); 59 | 60 | generatePasswordHash.addEventListener("submit", async (e) => { 61 | e.preventDefault(); 62 | 63 | const formData = new FormData(); 64 | formData.append("password", newPassword.value); 65 | 66 | const myRequest = new Request("passwordHash.php", { 67 | method: "POST", 68 | body: formData 69 | }); 70 | 71 | const response = await fetch(myRequest); 72 | response.text().then((data) => { 73 | hash.innerText = data; 74 | }); 75 | }); 76 | 77 | btnRegisterParticipant.addEventListener("click", async () => { 78 | const formData = new FormData(); 79 | formData.append("password", password.value); 80 | formData.append("task", task.value); 81 | 82 | const myRequest = new Request("registerParticipant.php", { 83 | method: "POST", 84 | body: formData 85 | }); 86 | 87 | const response = await fetch(myRequest); 88 | 89 | if (!response.ok) { 90 | alert("Error: " + response.status + "\n" + response.statusText); 91 | return; 92 | } 93 | 94 | loadCurrentParticipant(); 95 | }); 96 | 97 | function getCookie(cname) { 98 | let name = cname + "="; 99 | let decodedCookie = decodeURIComponent(document.cookie); 100 | let ca = decodedCookie.split(';'); 101 | for (let i = 0; i < ca.length; i++) { 102 | let c = ca[i]; 103 | while (c.charAt(0) == ' ') { 104 | c = c.substring(1); 105 | } 106 | if (c.indexOf(name) == 0) { 107 | return c.substring(name.length, c.length); 108 | } 109 | } 110 | return ""; 111 | } 112 | 113 | function loadCurrentParticipant() { 114 | participantId.innerText = getCookie("participant"); 115 | participantTask.innerText = getCookie("task"); 116 | } 117 | 118 | async function setParticipantID(id) { 119 | const formData = new FormData(); 120 | formData.append("password", password.value); 121 | formData.append("id", id); 122 | 123 | const myRequest = new Request("setParticipantID.php", { 124 | method: "POST", 125 | body: formData 126 | }); 127 | 128 | const response = await fetch(myRequest); 129 | 130 | if (!response.ok) { 131 | alert("Error: " + response.status + "\n" + response.statusText); 132 | return; 133 | } 134 | 135 | loadCurrentParticipant(); 136 | } 137 | 138 | async function deleteParticipant(id) { 139 | const formData = new FormData(); 140 | formData.append("password", password.value); 141 | formData.append("id", id); 142 | 143 | const myRequest = new Request("deleteParticipant.php", { 144 | method: "POST", 145 | body: formData 146 | }); 147 | 148 | const response = await fetch(myRequest); 149 | 150 | if (!response.ok) { 151 | alert("Error: " + response.status + "\n" + response.statusText); 152 | return; 153 | } 154 | } 155 | 156 | btnScreenshotUpload.addEventListener("click", () => { 157 | window.location.href = "/screenshot/?uid=" + getCookie("participant"); 158 | }); 159 | 160 | btnLoadParticipants.addEventListener("click", async () => { 161 | const formData = new FormData(); 162 | formData.append("password", password.value); 163 | 164 | const myRequest = new Request("getParticipants.php", { 165 | method: "POST", 166 | body: formData 167 | }); 168 | 169 | const response = await fetch(myRequest); 170 | 171 | if (!response.ok) { 172 | alert("Error: " + response.status + "\n" + response.statusText); 173 | return; 174 | } 175 | 176 | response.json().then((data) => { 177 | participantList.innerHTML = ""; 178 | data.forEach((participant) => { 179 | const tr = document.createElement("tr"); 180 | const td1 = document.createElement("td"); 181 | td1.innerText = participant.id; 182 | const td2 = document.createElement("td"); 183 | td2.innerText = participant.task; 184 | const td3 = document.createElement("td"); 185 | td3.innerText = participant.reg_date; 186 | const td4 = document.createElement("td"); 187 | const setID = document.createElement("a"); 188 | setID.innerText = "✏️"; 189 | setID.addEventListener("click", () => { 190 | setParticipantID(participant.id); 191 | }); 192 | td4.appendChild(setID); 193 | const td5 = document.createElement("td"); 194 | const del = document.createElement("a"); 195 | del.innerText = "🗑️"; 196 | del.addEventListener("click", () => { 197 | deleteParticipant(participant.id); 198 | }); 199 | td5.appendChild(del); 200 | tr.appendChild(td1); 201 | tr.appendChild(td2); 202 | tr.appendChild(td3); 203 | tr.appendChild(td4); 204 | tr.appendChild(td5); 205 | participantList.appendChild(tr); 206 | }); 207 | }); 208 | }); 209 | 210 | 211 | switchActionLog.addEventListener("click", autoGetActionLog); 212 | 213 | async function autoGetActionLog() { 214 | if (!switchActionLog.checked) { 215 | return; 216 | } 217 | 218 | const formData = new FormData(); 219 | formData.append("password", password.value); 220 | 221 | const myRequest = new Request("getActionLog.php", { 222 | method: "POST", 223 | body: formData 224 | }); 225 | 226 | const response = await fetch(myRequest); 227 | 228 | if (!response.ok) { 229 | switchActionLog.checked = false; 230 | alert("Error: " + response.status + "\n" + response.statusText); 231 | return; 232 | } 233 | 234 | response.json().then((data) => { 235 | actionLog.innerHTML = ""; 236 | data.forEach((action) => { 237 | const tr = document.createElement("tr"); 238 | const td1 = document.createElement("td"); 239 | td1.innerText = action.participant; 240 | const td2 = document.createElement("td"); 241 | td2.innerText = actionIdToString(action.action); 242 | const td3 = document.createElement("td"); 243 | td3.innerText = action.date; 244 | tr.appendChild(td1); 245 | tr.appendChild(td2); 246 | tr.appendChild(td3); 247 | actionLog.appendChild(tr); 248 | }); 249 | }); 250 | 251 | setTimeout(autoGetActionLog, 1000); 252 | } -------------------------------------------------------------------------------- /survey/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 |
16 | 28 |
29 | 30 |
31 | 32 |

33 | 34 |

35 | 36 |
37 |
38 |

39 | 42 | 50 |
51 |
52 |

53 | 58 |
59 | 60 | 64 | 68 |
69 |
70 | 71 | 75 | 79 | 83 | 87 | 91 | 95 | 99 | 103 | 107 |
108 | 112 |
113 | 114 | 118 | 122 | 126 | 130 | 134 |
135 |
136 |
137 |

138 |
139 | 140 | 144 | 148 |
149 |
150 | 151 | 155 | 159 |
160 | 163 | 167 |
168 | 169 | 173 | 177 | 181 | 185 |
186 |
187 |
188 | 192 | 196 |
197 | 200 | 203 |
204 |
205 |
206 |
207 |
208 | 209 |
210 | 211 |
212 | 213 | 214 | 215 | 216 | 217 | 218 | -------------------------------------------------------------------------------- /screenshot/qrcode.min.js: -------------------------------------------------------------------------------- 1 | var QRCode;!function(){function t(t){this.mode=r.MODE_8BIT_BYTE,this.data=t,this.parsedData=[];for(var e=0,o=this.data.length;e65536?(i[0]=240|(1835008&n)>>>18,i[1]=128|(258048&n)>>>12,i[2]=128|(4032&n)>>>6,i[3]=128|63&n):n>2048?(i[0]=224|(61440&n)>>>12,i[1]=128|(4032&n)>>>6,i[2]=128|63&n):n>128?(i[0]=192|(1984&n)>>>6,i[1]=128|63&n):i[0]=n,this.parsedData.push(i)}this.parsedData=Array.prototype.concat.apply([],this.parsedData),this.parsedData.length!=this.data.length&&(this.parsedData.unshift(191),this.parsedData.unshift(187),this.parsedData.unshift(239))}function e(t,e){this.typeNumber=t,this.errorCorrectLevel=e,this.modules=null,this.moduleCount=0,this.dataCache=null,this.dataList=[]}t.prototype={getLength:function(t){return this.parsedData.length},write:function(t){for(var e=0,r=this.parsedData.length;e=7&&this.setupTypeNumber(t),null==this.dataCache&&(this.dataCache=e.createData(this.typeNumber,this.errorCorrectLevel,this.dataList)),this.mapData(this.dataCache,r)},setupPositionProbePattern:function(t,e){for(var r=-1;r<=7;r++)if(!(t+r<=-1||this.moduleCount<=t+r))for(var o=-1;o<=7;o++)e+o<=-1||this.moduleCount<=e+o||(this.modules[t+r][e+o]=0<=r&&r<=6&&(0==o||6==o)||0<=o&&o<=6&&(0==r||6==r)||2<=r&&r<=4&&2<=o&&o<=4)},getBestMaskPattern:function(){for(var t=0,e=0,r=0;r<8;r++){this.makeImpl(!0,r);var o=g.getLostPoint(this);(0==r||t>o)&&(t=o,e=r)}return e},createMovieClip:function(t,e,r){var o=t.createEmptyMovieClip(e,r);this.make();for(var i=0;i>r&1);this.modules[Math.floor(r/3)][r%3+this.moduleCount-8-3]=o}for(r=0;r<18;r++){o=!t&&1==(e>>r&1);this.modules[r%3+this.moduleCount-8-3][Math.floor(r/3)]=o}},setupTypeInfo:function(t,e){for(var r=this.errorCorrectLevel<<3|e,o=g.getBCHTypeInfo(r),i=0;i<15;i++){var n=!t&&1==(o>>i&1);i<6?this.modules[i][8]=n:i<8?this.modules[i+1][8]=n:this.modules[this.moduleCount-15+i][8]=n}for(i=0;i<15;i++){n=!t&&1==(o>>i&1);i<8?this.modules[8][this.moduleCount-i-1]=n:i<9?this.modules[8][15-i-1+1]=n:this.modules[8][15-i-1]=n}this.modules[this.moduleCount-8][8]=!t},mapData:function(t,e){for(var r=-1,o=this.moduleCount-1,i=7,n=0,a=this.moduleCount-1;a>0;a-=2)for(6==a&&a--;;){for(var s=0;s<2;s++)if(null==this.modules[o][a-s]){var h=!1;n>>i&1)),g.getMask(e,o,a-s)&&(h=!h),this.modules[o][a-s]=h,-1==--i&&(n++,i=7)}if((o+=r)<0||this.moduleCount<=o){o-=r,r=-r;break}}}},e.PAD0=236,e.PAD1=17,e.createData=function(t,r,o){for(var i=m.getRSBlocks(t,r),n=new _,a=0;a8*h)throw new Error("code length overflow. ("+n.getLengthInBits()+">"+8*h+")");for(n.getLengthInBits()+4<=8*h&&n.put(0,4);n.getLengthInBits()%8!=0;)n.putBit(!1);for(;!(n.getLengthInBits()>=8*h||(n.put(e.PAD0,8),n.getLengthInBits()>=8*h));)n.put(e.PAD1,8);return e.createBytes(n,i)},e.createBytes=function(t,e){for(var r=0,o=0,i=0,n=new Array(e.length),a=new Array(e.length),s=0;s=0?d.get(c):0}}var m=0;for(u=0;u=0;)e^=g.G15<=0;)e^=g.G18<>>=1;return e},getPatternPosition:function(t){return g.PATTERN_POSITION_TABLE[t-1]},getMask:function(t,e,r){switch(t){case i:return(e+r)%2==0;case n:return e%2==0;case a:return r%3==0;case s:return(e+r)%3==0;case h:return(Math.floor(e/2)+Math.floor(r/3))%2==0;case l:return e*r%2+e*r%3==0;case u:return(e*r%2+e*r%3)%2==0;case f:return(e*r%3+(e+r)%2)%2==0;default:throw new Error("bad maskPattern:"+t)}},getErrorCorrectPolynomial:function(t){for(var e=new p([1],0),r=0;r5&&(r+=3+n-5)}for(o=0;o=256;)t-=255;return d.EXP_TABLE[t]},EXP_TABLE:new Array(256),LOG_TABLE:new Array(256)},c=0;c<8;c++)d.EXP_TABLE[c]=1<>>7-t%8&1)},put:function(t,e){for(var r=0;r>>e-r-1&1))},getLengthInBits:function(){return this.length},putBit:function(t){var e=Math.floor(this.length/8);this.buffer.length<=e&&this.buffer.push(0),t&&(this.buffer[e]|=128>>>this.length%8),this.length++}};var v=[[17,14,11,7],[32,26,20,14],[53,42,32,24],[78,62,46,34],[106,84,60,44],[134,106,74,58],[154,122,86,64],[192,152,108,84],[230,180,130,98],[271,213,151,119],[321,251,177,137],[367,287,203,155],[425,331,241,177],[458,362,258,194],[520,412,292,220],[586,450,322,250],[644,504,364,280],[718,560,394,310],[792,624,442,338],[858,666,482,382],[929,711,509,403],[1003,779,565,439],[1091,857,611,461],[1171,911,661,511],[1273,997,715,535],[1367,1059,751,593],[1465,1125,805,625],[1528,1190,868,658],[1628,1264,908,698],[1732,1370,982,742],[1840,1452,1030,790],[1952,1538,1112,842],[2068,1628,1168,898],[2188,1722,1228,958],[2303,1809,1283,983],[2431,1911,1351,1051],[2563,1989,1423,1093],[2699,2099,1499,1139],[2809,2213,1579,1219],[2953,2331,1663,1273]];function C(){var t=!1,e=navigator.userAgent;if(/android/i.test(e)){t=!0;var r=e.toString().match(/android ([0-9]\.[0-9])/i);r&&r[1]&&(t=parseFloat(r[1]))}return t}var w=function(){var t=function(t,e){this._el=t,this._htOption=e};return t.prototype.draw=function(t){var e=this._htOption,r=this._el,o=t.getModuleCount();Math.floor(e.width/o),Math.floor(e.height/o);function i(t,e){var r=document.createElementNS("http://www.w3.org/2000/svg",t);for(var o in e)e.hasOwnProperty(o)&&r.setAttribute(o,e[o]);return r}this.clear();var n=i("svg",{viewBox:"0 0 "+String(o)+" "+String(o),width:"100%",height:"100%",fill:e.colorLight});n.setAttributeNS("http://www.w3.org/2000/xmlns/","xmlns:xlink","http://www.w3.org/1999/xlink"),r.appendChild(n),n.appendChild(i("rect",{fill:e.colorLight,width:"100%",height:"100%"})),n.appendChild(i("rect",{fill:e.colorDark,width:"1",height:"1",id:"template"}));for(var a=0;a'],s=0;s");for(var h=0;h');a.push("")}a.push(""),r.innerHTML=a.join("");var l=r.childNodes[0],u=(e.width-l.offsetWidth)/2,f=(e.height-l.offsetHeight)/2;u>0&&f>0&&(l.style.margin=f+"px "+u+"px")},t.prototype.clear=function(){this._el.innerHTML=""},t}():function(){function t(){this._elImage.src=this._elCanvas.toDataURL("image/png"),this._elImage.style.display="block",this._elCanvas.style.display="none"}if(this._android&&this._android<=2.1){var e=1/window.devicePixelRatio,r=CanvasRenderingContext2D.prototype.drawImage;CanvasRenderingContext2D.prototype.drawImage=function(t,o,i,n,a,s,h,l,u){if("nodeName"in t&&/img/i.test(t.nodeName))for(var f=arguments.length-1;f>=1;f--)arguments[f]=arguments[f]*e;else void 0===l&&(arguments[1]*=e,arguments[2]*=e,arguments[3]*=e,arguments[4]*=e);r.apply(this,arguments)}}var o=function(t,e){this._bIsPainted=!1,this._android=C(),this._htOption=e,this._elCanvas=document.createElement("canvas"),this._elCanvas.width=e.width,this._elCanvas.height=e.height,t.appendChild(this._elCanvas),this._el=t,this._oContext=this._elCanvas.getContext("2d"),this._bIsPainted=!1,this._elImage=document.createElement("img"),this._elImage.alt="Scan me!",this._elImage.style.display="none",this._el.appendChild(this._elImage),this._bSupportDataURI=null};return o.prototype.draw=function(t){var e=this._elImage,r=this._oContext,o=this._htOption,i=t.getModuleCount(),n=o.width/i,a=o.height/i,s=Math.round(n),h=Math.round(a);e.style.display="none",this.clear();for(var l=0;lv.length)throw new Error("Too long data");return r}(QRCode=function(t,e){if(this._htOption={width:256,height:256,typeNumber:4,colorDark:"#000000",colorLight:"#ffffff",correctLevel:o.H},"string"==typeof e&&(e={text:e}),e)for(var r in e)this._htOption[r]=e[r];"string"==typeof t&&(t=document.getElementById(t)),this._htOption.useSVG&&(D=w),this._android=C(),this._el=t,this._oQRCode=null,this._oDrawing=new D(this._el,this._htOption),this._htOption.text&&this.makeCode(this._htOption.text)}).prototype.makeCode=function(t){this._oQRCode=new e(A(t,this._htOption.correctLevel),this._htOption.correctLevel),this._oQRCode.addData(t),this._oQRCode.make(),this._el.title=t,this._oDrawing.draw(this._oQRCode),this.makeImage()},QRCode.prototype.makeImage=function(){"function"==typeof this._oDrawing.makeImage&&(!this._android||this._android>=3)&&this._oDrawing.makeImage()},QRCode.prototype.clear=function(){this._oDrawing.clear()},QRCode.CorrectLevel=o}(),"undefined"!=typeof module&&(module.exports=QRCode); 2 | --------------------------------------------------------------------------------