Added tooltip for QB functionality and tweaked some css

ucfopen · Feb 27, 2024 · 4bf05a0 · 4bf05a0
1 parent 1d8e362
commit 4bf05a0
Show file tree

Hide file tree

Showing 2 changed files with 34 additions and 6 deletions.
diff --git a/src/creator.html b/src/creator.html
@@ -58,8 +58,16 @@ <h1 id="title" ng-bind="title" ng-click="showTitleDialog = true"></h1>
 			</span>
 			<div class="random partial">
 				<p>Randomize Order</p>
-				<input type="checkbox" id="randomize" ng-model="random">
-				<label for="randomize" class="checktoggle"></label>
+				<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>
 			</div>
 			<div class="partial">
 				<p>Partial scoring</p>
@@ -213,6 +221,7 @@ <h1>Guess the Phrase</h1>
 					</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
@@ -515,7 +515,7 @@ button.add-question {
 		justify-content: center;
 		width: 100%;
 		align-items: center;
-		margin-bottom: 15px;
+		margin-bottom: 5px;
 
 		.num-input {
 			color: black;
@@ -534,6 +534,11 @@ button.add-question {
 			justify-content: center;
 		}
 	}
+	.qb-warning {
+		font-size: 14px;
+		margin: 0;
+		text-align: center;
+	}
 
 	.dialog-close-button {
 		position: relative;
@@ -699,7 +704,7 @@ button.add-question {
 		background-color: $green;
 		color: #fff;
 		width: unset;
-		right: 550px;
+		right: 590px;
 		top: 35px;
 
 		&:hover {
@@ -731,7 +736,7 @@ button.add-question {
 
 	.attempts {
 		position: absolute;
-		right: 355px;
+		right: 395px;
 		cursor: pointer;
 		top:0px;
 
@@ -874,10 +879,17 @@ button.add-question {
 	.random {
 		position: absolute;
 		top: 0px;
-		right: 185px;
+		right: 225px;
 		font-family: "Lato";
+
 		label.checktoggle {
 			left: 24px;
+
+			&.disabled-look {
+				background-color: #676363;
+				opacity: 0.5;
+				cursor: not-allowed;
+			}
 		}
 	}
 }
@@ -898,6 +910,9 @@ button.add-question {
 
 	transition: all 0.15s ease;
 
+	&.randomizer-tip {
+		right: 190px;
+	}
 	&:hover {
 		opacity: 1;
 		background: #53a1d1;
@@ -961,6 +976,10 @@ button.add-question {
 		}
 	}
 
+	&.randomize-tooltip {
+		right: 180px;
+	}
+
 }
 
 .answer {