Skip to content

Commit

Permalink
Merge pull request #74 from clpetersonucf/issue/73-feedback-not-requi…
Browse files Browse the repository at this point in the history 
…red-in-tutorial

Tutorial sequence no longer includes feedback
  • Loading branch information
@clpetersonucf
clpetersonucf authored Apr 24, 2024
2 parents 38d0bf1 + 5111a5e commit e200328
Show file tree
Hide file tree
Showing 4 changed files with 50 additions and 78 deletions.
26 changes: 12 additions & 14 deletions src/controllers/ctl-creator.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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'
]
}
Expand Down Expand Up @@ -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) {
Expand All @@ -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
}
}
Expand Down Expand Up @@ -537,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) {
if (step == 9) {
return $scope.tutorial.step = null
}
else {
return $scope.tutorial.step++
return $scope.tutorial.step = step + 1
}
}
} else {
Expand Down
54 changes: 27 additions & 27 deletions src/creator.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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">
Expand All @@ -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>
Expand All @@ -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>
Expand All @@ -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'">
Expand All @@ -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
Expand All @@ -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'">
Expand All @@ -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"
Expand All @@ -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>

Expand Down Expand Up @@ -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>
Expand All @@ -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>
Expand Down
34 changes: 10 additions & 24 deletions src/creator.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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;
Expand Down
14 changes: 1 addition & 13 deletions src/creator.test.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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)
Expand Down Expand Up @@ -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()
})

Expand Down

0 comments on commit e200328

Please sign in to comment.