Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Tutorial sequence no longer includes feedback #74

Merged
merged 4 commits into from
Apr 24, 2024
Merged

Tutorial sequence no longer includes feedback #74

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
da7ccb8
Tutorial sequence no longer includes feedback, since it is not required
clpetersonucf Apr 24, 2024
799326b
Fix for tutorial progression when text is selected for incorrect option
clpetersonucf Apr 24, 2024
d3a6609
Fixed additional tutorial progression errors
clpetersonucf Apr 24, 2024
5111a5e
Tweaks to appease tests
clpetersonucf Apr 24, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
26 changes: 12 additions & 14 deletions src/controllers/ctl-creator.js
View file
Open in desktop
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
Open in desktop
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
Open in desktop
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
Open in desktop
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
Loading