From da7ccb83611aff10471a3dff3ace8699932dabcf Mon Sep 17 00:00:00 2001
From: Corey Peterson <corey.peterson@ucf.edu>
Date: Wed, 24 Apr 2024 12:44:34 -0400
Subject: [PATCH 1/4] Tutorial sequence no longer includes feedback, since it
 is not required

---
 src/controllers/ctl-creator.js | 20 ++++++-------
 src/creator.html               | 54 +++++++++++++++++-----------------
 src/creator.scss               | 34 +++++++--------------
 3 files changed, 46 insertions(+), 62 deletions(-)

diff --git a/src/controllers/ctl-creator.js b/src/controllers/ctl-creator.js
index d7e9e68..5e40545 100644
--- a/src/controllers/ctl-creator.js
+++ b/src/controllers/ctl-creator.js
@@ -16,11 +16,9 @@ export const ControllerThisOrThatCreator = function($scope, $timeout, $sanitize,
 			'Pick the answer type',
 			'CORRECT_ITEM_SELECT',
 			'CORRECT_ITEM_DESCRIPTION',
-			'Enter some optional feedback',
 			'Pick the answer type',
 			'INCORRECT_ITEM_SELECT',
 			'INCORRECT_ITEM_DESCRIPTION',
-			'Enter some optional feedback',
 			'Add another question'
 		]
 	}
@@ -329,11 +327,11 @@ export const ControllerThisOrThatCreator = function($scope, $timeout, $sanitize,
 			}
 		}
 
-		$scope.tutorialIncrement(sideIndex ? 6 : 2)
+		$scope.tutorialIncrement(sideIndex ? 5 : 2)
 		switch (type) {
 			case 'image':
-				$scope.tutorial.text[sideIndex ? 6 : 2] = `Upload the ${sideIndex ? 'in' : ''}correct image`
-				$scope.tutorial.text[sideIndex ? 7 : 3] = `Describe the ${sideIndex ? 'in' : ''}correct image`
+				$scope.tutorial.text[sideIndex ? 5 : 2] = `Upload the ${sideIndex ? 'in' : ''}correct image`
+				$scope.tutorial.text[sideIndex ? 6 : 3] = `Describe the ${sideIndex ? 'in' : ''}correct image`
 				break
 			case 'text':
 				if (side == $scope.CORRECT) {
@@ -343,16 +341,16 @@ export const ControllerThisOrThatCreator = function($scope, $timeout, $sanitize,
 				{
 					$scope.questions[currIndex].incorrect.alt = '-'
 				}
-				$scope.tutorial.text[sideIndex ? 6 : 2] = `Enter the ${sideIndex ? 'in' : ''}correct answer`
-				$scope.tutorial.text[sideIndex ? 7 : 3] = ``
+				$scope.tutorial.text[sideIndex ? 5 : 2] = `Enter the ${sideIndex ? 'in' : ''}correct answer`
+				$scope.tutorial.text[sideIndex ? 6 : 3] = ``
 				break
 			case 'audio':
-				$scope.tutorial.text[sideIndex ? 6 : 2] = `Upload the ${sideIndex ? 'in' : ''}correct audio`
-				$scope.tutorial.text[sideIndex ? 7 : 3] = `Describe the ${sideIndex ? 'in' : ''}correct audio`
+				$scope.tutorial.text[sideIndex ? 5 : 2] = `Upload the ${sideIndex ? 'in' : ''}correct audio`
+				$scope.tutorial.text[sideIndex ? 6 : 3] = `Describe the ${sideIndex ? 'in' : ''}correct audio`
 				break
 			case 'video':
-				$scope.tutorial.text[sideIndex ? 6 : 2] = `Link the ${sideIndex ? 'in' : ''}correct video`
-				$scope.tutorial.text[sideIndex ? 7 : 3] = `Describe the ${sideIndex ? 'in' : ''}correct video`
+				$scope.tutorial.text[sideIndex ? 5 : 2] = `Link the ${sideIndex ? 'in' : ''}correct video`
+				$scope.tutorial.text[sideIndex ? 6 : 3] = `Describe the ${sideIndex ? 'in' : ''}correct video`
 				break
 		}
 	}
diff --git a/src/creator.html b/src/creator.html
index 1068097..14c9c18 100755
--- a/src/creator.html
+++ b/src/creator.html
@@ -222,9 +222,9 @@ <h2 class="desc">The correct choice</h2>
 										ng-if="questions[currIndex].correct.type != null"
 										placeholder="Optional feedback for a correct answer"
 										class="feedback"
-										ng-change="validation('change', currIndex); tutorialIncrement(5);"
+										ng-change="validation('change', currIndex)"
 										ng-model="questions[currIndex].correct.options.feedback"
-										ng-disabled="tutorial.step && tutorial.step < 5">
+										ng-disabled="tutorial.step && tutorial.step < 4">
 							</section>
 
 							<section class="frame-container right">
@@ -233,24 +233,24 @@ <h2 class="desc">The incorrect choice</h2>
 								<div
 									ng-class="{ 'hidden': questions[currIndex].incorrect.type !== null }"
 									class="img-frame incorrect answer-types"
-									ng-disabled="tutorial.step && tutorial.step < 6">
+									ng-disabled="tutorial.step && tutorial.step < 5">
 									<button
-										ng-disabled="tutorial.step && tutorial.step < 6"
+										ng-disabled="tutorial.step && tutorial.step < 5"
 										ng-click="updateAnswerType('image', currIndex, INCORRECT)">
 										<span class="icon icon-image" aria-hidden="true"></span><span>image</span>
 									</button>
 									<button
-										ng-disabled="tutorial.step && tutorial.step < 6"
+										ng-disabled="tutorial.step && tutorial.step < 5"
 										ng-click="updateAnswerType('text', currIndex, INCORRECT)">
 										<span class="icon icon-pencil" aria-hidden="true"></span><span>text</span>
 									</button>
 									<button
-										ng-disabled="tutorial.step && tutorial.step < 6"
+										ng-disabled="tutorial.step && tutorial.step < 5"
 										ng-click="updateAnswerType('audio', currIndex, INCORRECT)">
 										<span class="icon icon-music" aria-hidden="true"></span><span>audio</span>
 									</button>
 									<button
-										ng-disabled="tutorial.step && tutorial.step < 6"
+										ng-disabled="tutorial.step && tutorial.step < 5"
 										ng-click="updateAnswerType('video', currIndex, INCORRECT)">
 										<span class="icon icon-play" aria-hidden="true"></span><span>video</span>
 									</button>
@@ -272,8 +272,8 @@ <h2 class="desc">The incorrect choice</h2>
 								<ng-template ng-if="questions[currIndex].incorrect.type === 'image'">
 									<button class="img-frame incorrect"
 										aria-label="The incorrect image"
-										ng-click="requestImage(currIndex, INCORRECT); tutorialIncrement(7)"
-										ng-disabled="tutorial.step && tutorial.step < 7">
+										ng-click="requestImage(currIndex, INCORRECT); tutorialIncrement(6)"
+										ng-disabled="tutorial.step && tutorial.step < 6">
 										<img class="choice-img" ng-if="questions[currIndex].incorrect.value.length > 0" ng-src="{{questions[currIndex].incorrect.value}}" alt="{{questions[currIndex].incorrect.alt}}">
 										<span class="pre-upload" ng-if="!questions[currIndex].incorrect.value"><span class="icon icon-folder-upload" aria-hidden="true"></span>Click to upload or select an image file.</span>
 									</button>
@@ -288,9 +288,9 @@ <h2 class="desc">The incorrect choice</h2>
 									<input type="text"
 										placeholder="Description for the incorrect image"
 										required
-										ng-change="validation('change', currIndex); tutorialIncrement(8)"
+										ng-change="validation('change', currIndex); tutorialIncrement(7)"
 										ng-model="questions[currIndex].incorrect.alt"
-										ng-disabled="tutorial.step && tutorial.step < 8">
+										ng-disabled="tutorial.step && tutorial.step < 7">
 								</ng-template>
 
 								<ng-template ng-if="questions[currIndex].incorrect.type === 'text'">
@@ -303,18 +303,18 @@ <h2 class="desc">The incorrect choice</h2>
 										placeholder="Incorrect answer"
 										maxlength="412"
 										required
-										ng-change="validation('change', currIndex); tutorialIncrement(7); tutorialIncrement(8)"
+										ng-change="validation('change', currIndex); tutorialIncrement(7)"
 										ng-model="questions[currIndex].incorrect.value"
 										ng-blur="questions[currIndex].incorrect.alt = questions[currIndex].incorrect.value"
-										ng-disabled="tutorial.step && tutorial.step < 7"></textarea>
+										ng-disabled="tutorial.step && tutorial.step < 6"></textarea>
 									</div>
 								</ng-template>
 
 								<ng-template ng-if="questions[currIndex].incorrect.type === 'audio'">
 									<button class="img-frame incorrect"
 										aria-label="The incorrect audio"
-										ng-click="requestAudio(currIndex, INCORRECT); tutorialIncrement(7)"
-										ng-disabled="tutorial.step && tutorial.step < 7">
+										ng-click="requestAudio(currIndex, INCORRECT); tutorialIncrement(6)"
+										ng-disabled="tutorial.step && tutorial.step < 6">
 										<div>
 											<figure ng-if="questions[currIndex].incorrect.value.length > 0">
 												<audio
@@ -338,9 +338,9 @@ <h2 class="desc">The incorrect choice</h2>
 									<input type="text"
 										placeholder="Description for the incorrect audio"
 										required
-										ng-change="validation('change', currIndex); tutorialIncrement(8)"
+										ng-change="validation('change', currIndex); tutorialIncrement(7)"
 										ng-model="questions[currIndex].incorrect.alt"
-										ng-disabled="tutorial.step && tutorial.step < 8">
+										ng-disabled="tutorial.step && tutorial.step < 7">
 								</ng-template>
 
 								<ng-template ng-if="questions[currIndex].incorrect.type === 'video'">
@@ -349,10 +349,10 @@ <h2 class="desc">The incorrect choice</h2>
 											class="answer-margin"
 											ng-class="{'valid' : questions[currIndex].incorrect.videoValid == true, 'invalid': questions[currIndex].incorrect.videoValid == false}"
 											placeholder="Enter a YouTube or Vimeo URL"
-											ng-change="tutorialIncrement(7); questions[currIndex].incorrect.videoValid = null"
+											ng-change="tutorialIncrement(6); questions[currIndex].incorrect.videoValid = null"
 											required
 											ng-model="questions[currIndex].incorrect.value"
-											ng-disabled="tutorial.step && tutorial.step < 7" />
+											ng-disabled="tutorial.step && tutorial.step < 6" />
 										<button class="video-submit" ng-click="questions[currIndex].incorrect.videoValid = true">Embed Video</button>
 										<iframe
 											ng-show="questions[currIndex].incorrect.videoValid == true"
@@ -364,18 +364,18 @@ <h2 class="desc">The incorrect choice</h2>
 									<input type="text"
 										placeholder="Description for the incorrect video"
 										required
-										ng-change="validation('change', currIndex); tutorialIncrement(8)"
+										ng-change="validation('change', currIndex); tutorialIncrement(7)"
 										ng-model="questions[currIndex].incorrect.alt"
-										ng-disabled="tutorial.step && tutorial.step < 8" />
+										ng-disabled="tutorial.step && tutorial.step < 7" />
 								</ng-template>
 
 								<input type="text"
 										ng-if="questions[currIndex].incorrect.type != null"
 										placeholder="Optional feedback for an incorrect answer"
 										class="feedback"
-										ng-change="validation('change', currIndex); tutorialIncrement(9)"
+										ng-change="validation('change', currIndex)"
 										ng-model="questions[currIndex].incorrect.options.feedback"
-										ng-disabled="tutorial.step && tutorial.step < 9">
+										ng-disabled="tutorial.step && tutorial.step < 8">
 							</section>
 						</div>
 
@@ -403,7 +403,7 @@ <h2 class="desc">The incorrect choice</h2>
 				</button>
 
 				<div class="arrow-box"
-					ng-class="{ 'step1': tutorial.step == 1, 'step2': tutorial.step == 2, 'step3': tutorial.step == 3, 'step4': tutorial.step == 4, 'step5': tutorial.step == 5, 'step6': tutorial.step == 6, 'step7': tutorial.step == 7, 'step8': tutorial.step == 8, 'step9': tutorial.step == 9, 'step10 arrow-right': tutorial.step == 10}"
+					ng-class="{ 'step1': tutorial.step == 1, 'step2': tutorial.step == 2, 'step3': tutorial.step == 3, 'step4': tutorial.step == 4, 'step5': tutorial.step == 5, 'step6': tutorial.step == 6, 'step7': tutorial.step == 7, 'step8 arrow-right': tutorial.step == 8}"
 					ng-show="tutorial.step">
 					{{tutorial.text[tutorial.step - 1]}}
 				</div>
@@ -423,15 +423,15 @@ <h2 class="desc">The incorrect choice</h2>
 					class="rearrange-questions btn green"
 					aria-label="Rearrange Questions"
 					ng-click="dialog.rearrange = true"
-					ng-disabled="randomizeOrder || (tutorial.step && tutorial.step < 10) || questions.length < 2">
+					ng-disabled="randomizeOrder || (tutorial.step && tutorial.step < 8) || questions.length < 2">
 					Rearrange Questions
 				</button>
 				<button class="btn green"
 					id="add-question"
 					aria-label="Add Question"
 					ng-class="{'right': questions[0]}"
-					ng-click="addQuestion(); tutorialIncrement(10)"
-					ng-disabled="tutorial.step && tutorial.step < 10">
+					ng-click="addQuestion(); tutorialIncrement(8)"
+					ng-disabled="tutorial.step && tutorial.step < 8">
 					Add Question
 				</button>
 			</nav>
diff --git a/src/creator.scss b/src/creator.scss
index 87d06ff..f6b40fa 100755
--- a/src/creator.scss
+++ b/src/creator.scss
@@ -366,71 +366,57 @@ input[type='text'] {
 		border-width: 8px;
 		margin: -8px 0 0 0;
 	}
-
+	// question
 	&.step1 {
 		top: 75px;
 		left: 390px;
 		opacity: 1;
 		animation: pounce-down 1s infinite;
 	}
-
+	// correct item type
 	&.step2 {
 		top: 405px;
 		left: 129px;
 		opacity: 1;
 		animation: pounce-down 1s infinite;
 	}
-
+	// correct item selection (image | text | audio | video)
 	&.step3 {
 		top: 405px;
 		left: 115px;
 		opacity: 1;
 		animation: pounce-down 1s infinite;
 	}
-
+	// correct item description
 	&.step4 {
 		top: 465px;
 		left: 105px;
 		opacity: 1;
 		animation: pounce-down 1s infinite;
 	}
-
+	// incorrect item type
 	&.step5 {
-		top: 530px;
-		left: 105px;
-		opacity: 1;
-		animation: pounce-down 1s infinite;
-	}
-
-	&.step6 {
 		top: 405px;
 		right: 130px;
 		opacity: 1;
 		animation: pounce-down 1s infinite;
 	}
-
-	&.step7 {
+	// incorrect item selection (image | text | audio | video)
+	&.step6 {
 		top: 405px;
 		right: 105px;
 		opacity: 1;
 		animation: pounce-down 1s infinite;
 	}
-
-	&.step8 {
+	// incorrect item description
+	&.step7 {
 		top: 465px;
 		right: 105px;
 		opacity: 1;
 		animation: pounce-down 1s infinite;
 	}
-	// Feedback for incorrect
-	&.step9 {
-		top: 530px;
-		right: 105px;
-		opacity: 1;
-		animation: pounce-down 1s infinite;
-	}
 	// Add question
-	&.step10 {
+	&.step8 {
 		right: 135px;
 		opacity: 1;
 		animation: pounce-left 1s infinite;

From 799326bf0f0d61234914d531010b832191c79660 Mon Sep 17 00:00:00 2001
From: Corey Peterson <corey.peterson@ucf.edu>
Date: Wed, 24 Apr 2024 14:20:47 -0400
Subject: [PATCH 2/4] Fix for tutorial progression when text is selected for
 incorrect option

---
 src/controllers/ctl-creator.js | 4 ++--
 src/creator.html               | 2 +-
 2 files changed, 3 insertions(+), 3 deletions(-)

diff --git a/src/controllers/ctl-creator.js b/src/controllers/ctl-creator.js
index 5e40545..11e3c1d 100644
--- a/src/controllers/ctl-creator.js
+++ b/src/controllers/ctl-creator.js
@@ -535,13 +535,13 @@ export const ControllerThisOrThatCreator = function($scope, $timeout, $sanitize,
 
 	$scope.tutorialIncrement = function(step) {
 		if ($scope.tutorial.step > 0) {
-			if (step == $scope.tutorial.step)
+			if (step >= $scope.tutorial.step)
 			{
 				if (step == 11) {
 					return $scope.tutorial.step = null
 				}
 				else {
-					return $scope.tutorial.step++
+					return $scope.tutorial.step = step + 1
 				}
 			}
 		} else {
diff --git a/src/creator.html b/src/creator.html
index 14c9c18..b3c6e45 100755
--- a/src/creator.html
+++ b/src/creator.html
@@ -288,7 +288,7 @@ <h2 class="desc">The incorrect choice</h2>
 									<input type="text"
 										placeholder="Description for the incorrect image"
 										required
-										ng-change="validation('change', currIndex); tutorialIncrement(7)"
+										ng-change="validation('change', currIndex); tutorialIncrement(8)"
 										ng-model="questions[currIndex].incorrect.alt"
 										ng-disabled="tutorial.step && tutorial.step < 7">
 								</ng-template>

From d3a66097de3aea2abfc9ca86339977dbda71316c Mon Sep 17 00:00:00 2001
From: Corey Peterson <corey.peterson@ucf.edu>
Date: Wed, 24 Apr 2024 14:24:02 -0400
Subject: [PATCH 3/4] Fixed additional tutorial progression errors

---
 src/creator.html | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/creator.html b/src/creator.html
index b3c6e45..14c9c18 100755
--- a/src/creator.html
+++ b/src/creator.html
@@ -288,7 +288,7 @@ <h2 class="desc">The incorrect choice</h2>
 									<input type="text"
 										placeholder="Description for the incorrect image"
 										required
-										ng-change="validation('change', currIndex); tutorialIncrement(8)"
+										ng-change="validation('change', currIndex); tutorialIncrement(7)"
 										ng-model="questions[currIndex].incorrect.alt"
 										ng-disabled="tutorial.step && tutorial.step < 7">
 								</ng-template>

From 5111a5e70a331cb25dadd0f124e1c7566d9519c0 Mon Sep 17 00:00:00 2001
From: Corey Peterson <corey.peterson@ucf.edu>
Date: Wed, 24 Apr 2024 14:28:19 -0400
Subject: [PATCH 4/4] Tweaks to appease tests

---
 src/controllers/ctl-creator.js |  2 +-
 src/creator.test.js            | 14 +-------------
 2 files changed, 2 insertions(+), 14 deletions(-)

diff --git a/src/controllers/ctl-creator.js b/src/controllers/ctl-creator.js
index 11e3c1d..03753dd 100644
--- a/src/controllers/ctl-creator.js
+++ b/src/controllers/ctl-creator.js
@@ -537,7 +537,7 @@ export const ControllerThisOrThatCreator = function($scope, $timeout, $sanitize,
 		if ($scope.tutorial.step > 0) {
 			if (step >= $scope.tutorial.step)
 			{
-				if (step == 11) {
+				if (step == 9) {
 					return $scope.tutorial.step = null
 				}
 				else {
diff --git a/src/creator.test.js b/src/creator.test.js
index 103fcf5..9cfa12b 100644
--- a/src/creator.test.js
+++ b/src/creator.test.js
@@ -189,8 +189,6 @@ describe('Creator Controller', function() {
 		expect($scope.tutorial.step).toBe(2)
 		$scope.tutorialIncrement(1)
 		expect($scope.tutorial.step).toBe(2)
-		$scope.tutorialIncrement(6)
-		expect($scope.tutorial.step).toBe(2)
 
 		$scope.tutorialIncrement(2)
 		expect($scope.tutorial.step).toBe(3)
@@ -228,18 +226,8 @@ describe('Creator Controller', function() {
 		expect($scope.tutorial.step).toBe(9)
 
 		$scope.tutorialIncrement(9)
-		expect($scope.tutorial.step).toBe(10)
-		$scope.tutorialIncrement(9)
-		expect($scope.tutorial.step).toBe(10)
-
-		$scope.tutorialIncrement(10)
-		expect($scope.tutorial.step).toBe(11)
-		$scope.tutorialIncrement(10)
-		expect($scope.tutorial.step).toBe(11)
-
-		$scope.tutorialIncrement(11)
 		expect($scope.tutorial.step).toBeNull()
-		$scope.tutorialIncrement(11)
+		$scope.tutorialIncrement(9)
 		expect($scope.tutorial.step).toBeNull()
 	})