From e4490601515b8aee1a5e1bfcba7a86e33096712c Mon Sep 17 00:00:00 2001
From: Corey Peterson <corey.peterson@ucf.edu>
Date: Tue, 23 Apr 2024 10:35:09 -0400
Subject: [PATCH 1/2] Header style overhaul. Replaces reliance on floats and
 absolute positioning with flexbox.

---
 src/assets/img/materia-logo.svg |   1 +
 src/assets/materialogo.png      | Bin 3773 -> 0 bytes
 src/creator.html                |  50 +++++++++--------
 src/creator.scss                |  96 ++++++++++++++------------------
 4 files changed, 69 insertions(+), 78 deletions(-)
 create mode 100644 src/assets/img/materia-logo.svg
 delete mode 100644 src/assets/materialogo.png

diff --git a/src/assets/img/materia-logo.svg b/src/assets/img/materia-logo.svg
new file mode 100644
index 0000000..4536229
--- /dev/null
+++ b/src/assets/img/materia-logo.svg
@@ -0,0 +1 @@
+<?xml version="1.0" encoding="UTF-8"?><svg id="a" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 543.8 293.9"><path d="m454.7,115.6c-26.8,0-50.8,11.8-67.1,30.5-16.3-18.7-40.3-30.5-67.1-30.5s-22.6,2.2-32.7,6.2c4-10.1,6.2-21.1,6.2-32.7,0-49.2-39.9-89.2-89.2-89.2s-89.2,39.9-89.2,89.2,2.2,22.5,6.2,32.7c-10.1-4-21.1-6.2-32.7-6.2C39.9,115.6,0,155.5,0,204.8s39.9,89.2,89.2,89.2,89.2-39.9,89.2-89.2-2.2-22.6-6.2-32.7c10.1,4,21.1,6.2,32.7,6.2s22.6-2.2,32.7-6.2c-4,10.1-6.2,21.1-6.2,32.7,0,49.2,39.9,89.2,89.2,89.2s50.8-11.8,67.1-30.5c16.3,18.7,40.4,30.5,67.1,30.5,49.2,0,89.2-39.9,89.2-89.2,0-49.2-39.9-89.2-89.2-89.2Z" style="fill:#fff; stroke-width:0px;"/><path d="m454.7,121.8c-25.3,0-48,11.3-63.2,29.2,11.3,15,18.1,33.6,18.1,53.8s-6.7,38.8-18.1,53.8c15.2,17.9,37.9,29.2,63.2,29.2,45.8,0,83-37.2,83-83s-37.2-83-83-83Zm0,118c-19.4,0-35-15.7-35-35s15.7-35,35-35,35,15.7,35,35c0,19.4-15.7,35-35,35Z" style="fill:#f0824b; stroke-width:0px;"/><path d="m173.1,104c-2.1-4.5-3.3-9.5-3.3-14.9,0-19.4,15.7-35,35-35s35,15.7,35,35-1.4,11-3.8,15.7l34.6,34.6c10.7-14,17-31.4,17-50.4,0-45.8-37.2-83-83-83s-83,37.2-83,83,6.1,35.8,16.5,49.7l34.8-34.8Z" style="fill:#5ca2cc; stroke-width:0px;"/><path d="m220.5,120.4c-4.7,2.4-10.1,3.8-15.7,3.8s-9.7-1.1-14-2.9l-34.9,34.9c13.7,10,30.6,15.9,48.9,15.9s36.4-6.4,50.4-17l-34.6-34.6Z" style="fill:#5ca2cc; stroke-width:0px;"/><path d="m320.4,121.8c-13.1,0-25.5,3.1-36.6,8.6-2.5,4.8-5.4,9.3-8.7,13.6l29.6,29.6c4.7-2.4,10.1-3.8,15.7-3.8,19.4,0,35,15.7,35,35s-15.7,35-35,35-35-15.7-35-35,1.4-11,3.8-15.7l-29.6-29.6c-4.2,3.3-8.8,6.2-13.6,8.7-5.4,11-8.6,23.4-8.6,36.6,0,45.8,37.2,83,83,83s83-37.2,83-83-37.2-83-83-83Z" style="fill:#73c055; stroke-width:0px;"/><path d="m151.5,160.6l-30.2,30.2c1.9,4.3,2.9,9,2.9,14,0,19.4-15.7,35-35,35s-35-15.7-35-35,15.7-35,35-35,10.3,1.2,14.9,3.3l29.9-29.9c-3.1-4-5.8-8.4-8.2-12.9-11-5.4-23.4-8.5-36.5-8.5-45.8,0-83,37.2-83,83s37.2,83,83,83,83-37.2,83-83-3.1-25.5-8.5-36.5c-4.3-2.2-8.3-4.8-12.2-7.6Z" style="fill:#9e53a0; stroke-width:0px;"/></svg>
\ No newline at end of file
diff --git a/src/assets/materialogo.png b/src/assets/materialogo.png
deleted file mode 100644
index 9e04bde64c924c552c01ddd94f624533e5cf71a7..0000000000000000000000000000000000000000
GIT binary patch
literal 0
HcmV?d00001

literal 3773
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

diff --git a/src/creator.html b/src/creator.html
index 841c589..8be36fd 100644
--- a/src/creator.html
+++ b/src/creator.html
@@ -26,12 +26,6 @@
 			<div class="logo"></div>
 			<h1 id="title" ng-bind="title" ng-click="showTitleDialog = true"></h1>
 			<div ng-click="showTitleDialog = true" class="link">Edit...</div>
-			<button
-				ng-class= "{'qb-button': true, 'gray-out': !enableQuestionBank}"
-				ng-click="questionBankModal = !questionBankModal"
-				ng-disabled="items.length === 0">
-				Question Bank: {{enableQuestionBank === true ? "ON" : "OFF"}}
-			</button>
 			<span class="attempts">
 				<p>Incorrect guesses per phrase</p>
 				<div class="slide-btn">
@@ -59,31 +53,41 @@ <h1 id="title" ng-bind="title" ng-click="showTitleDialog = true"></h1>
 				<p>Randomize Order</p>
 				<input type="checkbox" ng-checked=enableQuestionBank ng-disabled=enableQuestionBank id="randomize" ng-model="random">
 				<label for="randomize" ng-class="{'disabled-look': enableQuestionBank}" class="checktoggle"></label>
-			</div>
-			<div class="question-tip randomizer-tip">?
-				<div class="qtip-box">
-					<p>
-						If <b>Question Bank</b> is on then the check to randomize order is disabled. This is because the question bank
-						randomizes the question order already.
-					</p>
+				<div class="question-tip randomizer-tip">?
+					<div class="qtip-box">
+						<p>
+							If <b>Question Bank</b> is on then the check to randomize order is disabled. This is because the question bank
+							randomizes the question order already.
+						</p>
+					</div>
 				</div>
 			</div>
+			
 			<div class="partial">
 				<p>Partial scoring</p>
 				<input type="checkbox" id="partial" ng-model="partial">
 				<label for="partial" class="checktoggle"></label>
-			</div>
-			<div class="question-tip">?
-				<div class="qtip-box">
-					<p>
-						If <b>partial scoring</b> is on then students will receive credit equal to the percentage of the phrase they reveal.
-						When off students will receive a 100% if they guess the phrase correctly and a 0% otherwise.
-					</p>
-					<p>
-						If the student doesn't reveal the phrase after the number of allowed <b>incorrect guesses</b> they move on to the next phrase.
-					</p>
+				<div class="question-tip">?
+					<div class="qtip-box">
+						<p>
+							If <b>partial scoring</b> is on then students will receive credit equal to the percentage of the phrase they reveal.
+							When off students will receive a 100% if they guess the phrase correctly and a 0% otherwise.
+						</p>
+						<p>
+							If the student doesn't reveal the phrase after the number of allowed <b>incorrect guesses</b> they move on to the next phrase.
+						</p>
+					</div>
 				</div>
 			</div>
+
+			<button
+				class="qb-button"
+				ng-class= "{'gray-out': !enableQuestionBank}"
+				ng-click="questionBankModal = !questionBankModal"
+				ng-disabled="items.length === 0">
+				Question Bank: {{enableQuestionBank === true ? "ON" : "OFF"}}
+			</button>
+
 			<div class="bottom"></div>
 		</div>
 		<div class="pagination" ng-show="numberOfPages() > 1">
diff --git a/src/creator.scss b/src/creator.scss
index 0479c57..5f9bbf3 100644
--- a/src/creator.scss
+++ b/src/creator.scss
@@ -629,9 +629,13 @@ button.add-question {
 	top: 0px;
 	left: 0px;
 	right: 0px;
+	display: flex;
+	justify-content: space-between;
+	align-items: center;
+	gap: 1em;
 	height: 100px;
 	background: #333;
-	padding: 26px 8px;
+	padding: 0 1em;
 	z-index: 100;
 	font-family: 'Lato';
 	font-weight: 300;
@@ -648,64 +652,50 @@ button.add-question {
 
 	.logo {
 		display: block;
-		background: url(assets/materialogo.png) no-repeat;
+		background: url(assets/img/materia-logo.svg) no-repeat;
 		width: 60px;
 		height: 50px;
-		float: left;
 		margin-left: 17px;
 		margin-top: 2px;
 	}
-	.center {
-		position:absolute;
-		margin-left: -25px;;
-		left: 50%;
-		top: 22px;
-	}
 
 	h1 {
+		max-width: 400px;
 		margin-left: 8px;
-		font-family: 'Lato', serif;
-		font-weight: 300;
-		font-size: 24px !important;
-		vertical-align: middle;
 		margin-top: 3px;
-		float: left;
-		cursor: pointer;
-		max-width: 400px;
+		
 		white-space: nowrap;
 		overflow: hidden;
+
+		font-family: 'Lato', serif;
+		font-weight: 300;
+		font-size: 24px;
+
+		cursor: pointer;
 	}
 	div.link {
-		float: left;
-		cursor: pointer;
+		position: relative;
+		left: -0.5em;
+		display: inline-block;
+		
 		margin: 5px;
-		margin-top: 5px;
+		margin-right: auto;
 		padding: 10px;
-		display: inline-block;
-		vertical-align: baseline;
-		z-index: 99;
+		
 		font-size: 12px;
 		color: #ccc;
 		text-decoration: underline;
-	}
-	.sep {
-		display: block;
-		border-radius: 10px;
-		width: 4px;
-		height: 4px;
-		position: absolute;
-		right: 270px;
-		top: 28px;
-		background: #fff;
+		cursor: pointer;
 	}
 
 	.qb-button {
-		position: absolute;
+		position: relative;
+		top: -0.25em;
+		width: auto;
+		height: auto;
+		border-radius: 0;
 		background-color: $green;
 		color: #fff;
-		width: unset;
-		right: 590px;
-		top: 35px;
 
 		&:hover {
 			background-color: #7AD038;
@@ -713,8 +703,8 @@ button.add-question {
 		}
 
 		&:disabled {
-			background-color: #ccc;
-			border: 1px solid #ccc;
+			border: none;
+			background-color: #5a5a5a;
 			color: #fff;
 			cursor: not-allowed;
 		}
@@ -735,16 +725,15 @@ button.add-question {
 	}
 
 	.attempts {
-		position: absolute;
-		right: 395px;
+		position: relative;
+		top: -0.5em;
 		cursor: pointer;
-		top:0px;
+		margin-left: 34px;
 
 		p {
-			position: absolute;
+			// position: relative;
 			display: inline-block;
-			margin-left: -34px;
-			top: 0;
+			margin: 0 0 1em -34px;
 			white-space: nowrap;
 		}
 
@@ -760,7 +749,7 @@ button.add-question {
 			}
 		}
 		.slide-btn {
-			margin-top: 54px;
+			padding-bottom: 0.5em;
 			.bar {
 				height: 10px;
 				width: 135px;
@@ -813,10 +802,10 @@ button.add-question {
 		}
 	}
 	.partial {
-		position: absolute;
-		top: 0px;
-		right: 70px;
+		position: relative;
+		top: -0.5em;
 		font-family: "Lato";
+		padding-right: 40px;
 
 		label.checktoggle {
 			display: inline-block;
@@ -877,9 +866,9 @@ button.add-question {
 		}
 	}
 	.random {
-		position: absolute;
-		top: 0px;
-		right: 225px;
+		position: relative;
+		// top: 0px;
+		// right: 225px;
 		font-family: "Lato";
 
 		label.checktoggle {
@@ -896,7 +885,7 @@ button.add-question {
 
 .question-tip {
 	position: absolute;
-	right: 28px;
+	right: 8px;
 	top: 15px;
 	padding: 2px;
 	border: 2px solid #fff;
@@ -910,9 +899,6 @@ button.add-question {
 
 	transition: all 0.15s ease;
 
-	&.randomizer-tip {
-		right: 190px;
-	}
 	&:hover {
 		opacity: 1;
 		background: #53a1d1;

From 710d42827234e54f2597285dc66b7b073b876060 Mon Sep 17 00:00:00 2001
From: Corey Peterson <corey.peterson@ucf.edu>
Date: Tue, 23 Apr 2024 12:52:53 -0400
Subject: [PATCH 2/2] Tweaks to qb dialog styling

---
 src/creator.html |  5 +++--
 src/creator.scss | 56 +++++++++++++++++++++++++++++++-----------------
 2 files changed, 39 insertions(+), 22 deletions(-)

diff --git a/src/creator.html b/src/creator.html
index 8be36fd..efd64b5 100644
--- a/src/creator.html
+++ b/src/creator.html
@@ -206,6 +206,8 @@ <h1>Guess the Phrase</h1>
 			<input type="button" value="Done" ng-click="hideCover()">
 		</div>
 		<div ng-class="{ show: questionBankModal }" ng-click= 'hideCover()' class="box question-bank-dialog">
+			<h1>Question Bank</h1>
+			<p>When the question bank is enabled, the widget can use a subset of phrases to create a randomized and unique experience every time the student hits play.</p>
 			<div class="enable-qb-question">
 				<label style="font-weight: bold;">Enable question bank? </label>
 				<div class="enable-qb-options" ng-click="$event.stopPropagation()">
@@ -217,14 +219,13 @@ <h1>Guess the Phrase</h1>
 			</div>
 			<div>
 				<span ng-show="enableQuestionBank" >
-					<label style="font-weight: bold;">How many questions to ask? </label>
+					<label style="font-weight: bold;">How many phrases per play? </label>
 					<div class="num-input-wrapper" ng-click="$event.stopPropagation()">
 						<input class="num-input" type="number" ng-model="questionBankValTemp" ng-change="validateQuestionBankVal()" step="1">
 						<span> out of {{items.length}} </span>
 					</div>
 				</span>
 			</div>
-			<p class="qb-warning">If question bank is enabled, questions will be randomized. </p>
 			<button class="dialog-close-button"
 			ng-click="questionBankModal = false"
 			ng-disabled="questionBankValTemp < 1 || questionBankValTemp > items.length">Confirm</button>
diff --git a/src/creator.scss b/src/creator.scss
index 5f9bbf3..419b919 100644
--- a/src/creator.scss
+++ b/src/creator.scss
@@ -486,23 +486,36 @@ button.add-question {
 .question-bank-dialog {
 
 	position: fixed;
+	height: 380px;
+	width: 400px;
+	padding: 1em;
 	top: 50%;
 	left: 50%;
-	margin: 0;
 	transform: translate(-50%, -50%);
-	background-color: #ffffff;
-	padding: 0;
-	height: 200px;
-	width: 300px;
+
 	display: flex;
-	justify-content: center;
+	justify-content: flex-start;
 	align-items: center;
 	flex-direction: column;
+	gap: 1em;
+	margin: 15px;
+
+	border: 0;
+
+	p {
+		font-size: 0.9em;
+		margin: 0.5em 1em;
+	}
+
+	label {
+		display: block;
+		margin-bottom: 0.5em;
+	}
 
 	input {
 		margin-top: 0;
 		padding: 0;
-		width: unset;
+		width: auto;
 		background: #ffffff;
 		font-size: 17px;
 		text-align: center;
@@ -520,7 +533,7 @@ button.add-question {
 		.num-input {
 			color: black;
 			outline: 1px solid black;
-			width: 35px;
+			width: 3em;
 			margin: 2px 5px 0 0;
 		}
 	}
@@ -541,16 +554,21 @@ button.add-question {
 	}
 
 	.dialog-close-button {
-		position: relative;
-		margin: 15 0 10 0;
+		position: absolute;
+		bottom: 2em;
+		margin-top: 10px;
+		box-shadow: none;
+		text-shadow: none;
 		font-size: 15px;
-		width: 100px;
+
+		border-radius: 0;
+		border: 0;
+
 		background-color: #70bd34;
-		color: black;
+		color: #fff;
 
 		&:hover {
 			background-color: #88df45;
-			border: 1px solid #88df45;
 			color: black;
 			cursor: pointer;
 		}
@@ -661,9 +679,8 @@ button.add-question {
 
 	h1 {
 		max-width: 400px;
-		margin-left: 8px;
-		margin-top: 3px;
-		
+		margin: -0.5em 0 0 0;
+
 		white-space: nowrap;
 		overflow: hidden;
 
@@ -675,7 +692,8 @@ button.add-question {
 	}
 	div.link {
 		position: relative;
-		left: -0.5em;
+		top: -0.5em;
+		left: -1em;
 		display: inline-block;
 		
 		margin: 5px;
@@ -704,19 +722,17 @@ button.add-question {
 
 		&:disabled {
 			border: none;
-			background-color: #5a5a5a;
+			background-color: #a5a5a5;
 			color: #fff;
 			cursor: not-allowed;
 		}
 
 		&.gray-out:not(:disabled) {
 			background-color: #5a5a5a;
-			border: 1px solid #5a5a5a;
 			color: #fff;
 
 			&:hover {
 				background-color: #938f8f;
-				border: 1px solid #938f8f;
 				cursor: pointer;
 			}