diff options
| author | sotech117 <michael_foiani@brown.edu> | 2024-01-22 14:09:16 -0500 |
|---|---|---|
| committer | sotech117 <michael_foiani@brown.edu> | 2024-01-22 14:09:16 -0500 |
| commit | 0152bc0ac8b5e5c4c32f25cc7ecfb12b19dc5c64 (patch) | |
| tree | d9ab6d08cbac9e6b1b1d9e97f8bba57ba6cf4d8c | |
| parent | ed8278faba0b7a17f802e9688893757f74c7722e (diff) | |
make the stencil student-ready
| -rw-r--r-- | a.html | 10 | ||||
| -rw-r--r-- | appointments-a.css (renamed from appointments.css) | 6 | ||||
| -rw-r--r-- | appointments-b.css | 134 | ||||
| -rw-r--r-- | b.html | 10 | ||||
| -rw-r--r-- | download-utils.js | 6 | ||||
| -rw-r--r-- | index.html | 43 | ||||
| -rw-r--r-- | record.js | 8 | ||||
| -rw-r--r-- | submit.js | 1 |
8 files changed, 203 insertions, 15 deletions
@@ -1,10 +1,14 @@ +<!-- + @ STUDENTS: DO NOT MODIFY THIS FILE! +--> + <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="version" content="A"> <link rel="stylesheet" href="styles.css"> - <link rel="stylesheet" href="appointments.css"> + <link rel="stylesheet" href="appointments-a.css"> <title>Version A</title> <script src="record.js" defer></script> @@ -17,7 +21,7 @@ <div class="user-info"> <p class="username">Scarlet Madden</p> <div class="profile-photo"> - <img src="pfp.jpg" class="photo"> + <img src="pfp.jpg" class="photo" alt="profile picture"> </div> </div> </div> @@ -120,7 +124,7 @@ <div class="appointments-container"> <p class="appointments-container-name">Available Appointments</p> <div class="divider"></div> - + <div class="appointment-row"> <div class="appointment-date"> <p class="date-text">APR</p> diff --git a/appointments.css b/appointments-a.css index b1bf204..a75538f 100644 --- a/appointments.css +++ b/appointments-a.css @@ -1,3 +1,7 @@ +/* + @ STUDENTS: DO NOT MODIFY THIS FILE (it is for a.html, which should not be modified) + */ + @font-face { font-family: 'PPNeueMontreal'; src: url(fonts/PPNeueMontreal-Medium.otf); @@ -127,4 +131,4 @@ .success-dialog::backdrop { background-color: black; opacity: 20%; -}
\ No newline at end of file +} diff --git a/appointments-b.css b/appointments-b.css new file mode 100644 index 0000000..2fbf790 --- /dev/null +++ b/appointments-b.css @@ -0,0 +1,134 @@ +/* + @ STUDENTS: EDIT THIS FILE TO MODIFY THE CSS RULES OF B.HTML + */ + +@font-face { + font-family: 'PPNeueMontreal'; + src: url(fonts/PPNeueMontreal-Medium.otf); +} + +@font-face { + font-family: 'PPNeueMontrealBook'; + src: url(fonts/PPNeueMontreal-Book.otf); +} + +@font-face { + font-family: 'PPNeueMontrealThin'; + src: url(fonts/PPNeueMontreal-Thin.otf); +} + +.appointments-container { + display: flex; + flex-direction: column; + background-color: white; + border-radius: 6px; + margin: 47px auto 47px 51px; + padding: 21px 22px 0 22px; + min-width: 60em; + box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.1); +} + +.appointments-container-name { + font-size: 20px; + font-family: 'PPNeueMontrealBook'; + color: #868686; + margin-top: 0; + margin-bottom: 12px; +} + +.divider { + height: 1px; + width: 100%; + background-color: #DADADA; + margin-top: 0; + margin-bottom: 17px; +} + +.appointment-row { + display: flex; + flex-direction: row; + align-items: center; + margin-bottom: 15px; +} + +.appointment-date { + display: flex; + flex-direction: column; + margin-right: 25px; + +.date-text { + margin-top: 0; + margin-bottom: 0; + text-align: right; + font-size: 24px; + font-family: 'PPNeueMontrealThin'; +} +} + +.appointment-info { + display: flex; + flex-direction: column; + justify-content: center; + min-width: 280px; + +.appointment-title, .appointment-text { + margin-top: 0; + margin-bottom: 0; + color: #868686; +} + +.appointment-title { + font-size: 24px; + font-family: 'PPNeueMontreal'; +} + +.appointment-text { + font-size: 20px; + font-family: 'PPNeueMontrealBook'; +} +} + +.appointment-buttons { + display: flex; + flex-direction: column; + gap: 10px; + padding-left: 45%; + +.defunct-button, .working-button { + background-color: #D4E8FF; + border: none; + border-radius: 9px; + width: 180px; + height: 45px; + color: white; +} +} + +.success-dialog { + border: none; + border-radius: 6px; + box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.1); + +.dialog-text { + font-family: 'PPNeueMontrealBook'; + font-size: 20px; + color: #868686; + margin-top: 0px; + margin-bottom: 10px; +} + +.dialog-button { + margin-top: 10px; + width: 150px; + border: none; + background-color: #D4E8FF; + border-radius: 9px; + padding: 14px 21px 14px 21px; + color: white; +} +} + +.success-dialog::backdrop { + background-color: black; + opacity: 20%; +} @@ -1,10 +1,14 @@ +<!-- + @ STUDENTS: MODIFY THIS FILE ALONG WITH appointments-b.css TO MAKE YOUR CHANGES! +--> + <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="version" content="B"> <link rel="stylesheet" href="styles.css"> - <link rel="stylesheet" href="appointments.css"> + <link rel="stylesheet" href="appointments-b.css"> <title>Version B</title> <script src="record.js" defer></script> @@ -17,7 +21,7 @@ <div class="user-info"> <p class="username">Scarlet Madden</p> <div class="profile-photo"> - <img src="pfp.jpg" class="photo"> + <img src="pfp.jpg" class="photo" alt="profile picture"> </div> </div> </div> @@ -120,7 +124,7 @@ <div class="appointments-container"> <p class="appointments-container-name">Available Appointments</p> <div class="divider"></div> - + <div class="appointment-row"> <div class="appointment-date"> <p class="date-text">APR</p> diff --git a/download-utils.js b/download-utils.js index 0156bdc..17b59a0 100644 --- a/download-utils.js +++ b/download-utils.js @@ -1,3 +1,9 @@ +/* + Author: sotech117 + License: Educational under Brown University + Date: 1/22/24 + */ + // citation: https://www.geeksforgeeks.org/how-to-create-and-download-csv-file-in-javascript/ // performs a downloadUtils of a csv file, given a string buffer in the format of csv text @@ -1,3 +1,7 @@ +<!-- + @ STUDENTS: DO NOT MODIFY THIS FILE! +--> + <!DOCTYPE html> <html lang="en"> <head> @@ -29,7 +33,13 @@ <script src="download-utils.js" defer></script> <script defer> - // redirect user to either A or B, on click of start button + // On load, update the select version input to reflect most recently selected version + onload = () => + document.querySelector('#version-selector').value + = localStorage.getItem('cs1300-ab-testing-version') ?? 'B'; // default to B + + + // redirect user to either A or B, on click of start buttons const redirectAB = () => { // initialize local storage to store data, if not there const data = localStorage.getItem("cs1300-ab-testing-data"); @@ -38,11 +48,21 @@ localStorage.setItem("cs1300-ab-testing-data", JSON.stringify([])); } - // location.href = "a.html"; // NOTE: FOR TAs, uncomment this and comment the next line. - location.href = "b.html"; // students only use B. - - // normally, you'd use the following line in a "true" AB test: - // location.href = Math.random() > .5 ? "a.html" : "b.html"; + // get the correct inputted version inside + const {value: version} = document.querySelector('#version-selector'); + // update local storage upon return + localStorage.setItem('cs1300-ab-testing-version', version); + switch (version) { + case 'B': + location.href = "b.html"; + break; + case 'A': + location.href = "a.html"; + break; + default: + location.href = Math.random() > .5 ? "a.html" : "b.html"; + break; + } }; const downloadAB = () => { @@ -69,11 +89,20 @@ cs1300 AB Testing Start Screen </h2> <p> - <strong>Task: </strong> On the next page, do XYZ... + <strong>Task: </strong> Schedule an appointment with Adam Ng, MD at Morristown Medical Center on April 23, 2024 </p> <button onclick="redirectAB()">Start Task</button> <br /> <br /> <button onclick="downloadAB()">Download & Clear Current Data</button> + <br /> + <br /> + <label> + <select id="version-selector"> + <option value="B">Version B (for students)</option> + <option value="A">Version A (for TA)</option> + <option value="R">Random (for real-world)</option> + </select> + </label> </body> </html> @@ -1,3 +1,11 @@ +/* + Author: sotech117 + License: Educational under Brown University + Date: 1/22/24 + */ + +// @ STUDENTS: DO NOT MODIFY THIS FILE!! + // generate a random UID for this user, on page load. const UID = Math.round(Math.random() * 1000000); @@ -3,7 +3,6 @@ window.addEventListener("DOMContentLoaded", () => { const openDialog = document.getElementById("working-button"); if (openDialog) { openDialog.addEventListener("click", () => { - console.log("hi"); dialog.showModal(); }); } |