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.

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

Dev/1.2.0 #70

Merged
merged 37 commits into from
Jun 24, 2024
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
37 commits
Select commit Hold shift + click to select a range
f486bd6
Implemented questionBank dialog with styling in creator
dmols Jan 11, 2024
4fcc596
Support for questionBank functionality in both creator and player
dmols Jan 11, 2024
4d3be9d
Added final styling to dialog button
dmols Jan 12, 2024
4bf32e8
Added safeguards and testing for new code
dmols Jan 12, 2024
d846eee
Added test coverage for question bank code in creator and player
dmols Jan 12, 2024
845e0a6
QB button indicates when it's on + questionBankVal now updates to que…
dmols Jan 16, 2024
ed57bb9
Fixed issue where qset didn't save the QB options
dmols Jan 16, 2024
c6e9a08
Styled qb dialog more like intro dialog
dmols Jan 23, 2024
83ecb5f
Small change from HEX value to pre-defined variable
dmols Jan 23, 2024
e48191b
changed variable names for better readability
dmols Jan 23, 2024
f1c21d1
Fixed visual changes to other modal components
dmols Jan 23, 2024
2395c9f
Styled and aligned QB button like the randomize button
dmols Jan 23, 2024
ed4a829
Changed text within QB dialog to be label instead
dmols Jan 23, 2024
feabc38
Removed overlay, placed qb modal with the others, and added variable …
dmols Jan 23, 2024
a418667
Added test coverage and cleaned up code
dmols Jan 24, 2024
a7d1c0e
Made additional selectors follow snake-case syntax
dmols Jan 26, 2024
a0918a3
Added styling to dialog & disabled qb on tutorial load
dmols Feb 9, 2024
c502e54
Simplified question bank dialog code and fixed modal error
dmols Feb 12, 2024
8efe893
Minor css changes
dmols Feb 13, 2024
3e377ae
Added clarification that QB will randomize questions
dmols Feb 28, 2024
6137fb2
Added tooltip and css changes to give header flexbox properties
dmols Mar 1, 2024
318d2cb
Merge pull request #65 from dmols/implementing_QuestionBank
clpetersonucf Apr 15, 2024
5f701c2
Adds update callback method. Implements setHeight method to scale sco…
clpetersonucf Apr 16, 2024
fc8ff55
Mocks scorecore setheight method in tests
clpetersonucf Apr 16, 2024
1f8dbea
Style tweaks to question bank modal and some wording
clpetersonucf Apr 16, 2024
2ce38d1
Merge pull request #72 from clpetersonucf/qbank-styling-polish
clpetersonucf Apr 16, 2024
5a0252f
Merge pull request #71 from clpetersonucf/issue/58-scorecore-missing-…
clpetersonucf Apr 16, 2024
38d0bf1
Resolved incorrect media reference in player
clpetersonucf Apr 22, 2024
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
e200328
Merge pull request #74 from clpetersonucf/issue/73-feedback-not-requi…
clpetersonucf Apr 24, 2024
b960542
Updated creator guide. Replaced creator Materia logo with SVG.
clpetersonucf Apr 30, 2024
04597e6
Video validation on blur events in addition to embed video button click
clpetersonucf Jun 11, 2024
8bd15dc
Adjusted player text choice scaling rate and thresholds
clpetersonucf Jun 11, 2024
e6e5779
updated player test with new font size thresholds for scaling
clpetersonucf Jun 11, 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
Binary file modified src/_guides/assets/creator_guide_1.png
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
22 changes: 14 additions & 8 deletions src/_guides/creator.md
Original file line number Diff line number Diff line change
Expand Up @@ -11,20 +11,22 @@ This or That tasks students with selecting the correct option in response to a q
1. Widget title
2. Question text
3. Correct answer type selection
4. Incorrect answer type selection
4. Incorrect answer (with image selected)
5. Paginate between questions
6. Duplicate this question
7. Question overview/selection
8. Rearrange questions dialog
9. Add a new question
10. Delete this question
11. Randomize the ordering of questions
6. Description (alt text) and optional feedback for incorrect choice
7. Duplicate question
8. Question selection
9. Rearrange the order of questions
10. Add another question
11. Delete this question
12. Question bank feature
13. Randomize questions toggle

Upon initializing the creator, you will be prompted to provide a title for your widget, and can also opt out of the tutorial if desired. The tutorial will walk you through entering the question text, correct and incorrect answer options, and option descriptions.

Note that the correct and incorrect description text is normally not visible to the user - they are intended primarily for accessibility purposes when the widget is played using a screenreader.

By default, questions will be ordered based on their arrangement in the creator - if you wish to randomize the ordering of questions when played, select the **Randomize Question Order** toggle on the top-right.
By default, questions will be ordered based on their arrangement in the creator. If you wish to randomize the ordering of questions when played, select the **Randomize Question Order** toggle on the top-right. _Note that when the Question Bank feature is enabled, questions will always be randomized. See the Question Bank section below._

### Answer Options ###

Expand All @@ -49,3 +51,7 @@ For **audio** choices, the description text is visible alongside the audio contr

![Creator embedded video example](assets/creator_guide_4_video.png "Creator embedded video example")

### Question Bank ###

When enabled, the question bank feature will select a subset of the questions you have authored at random every time a new play is initialized. You can adjust the size of the subset up to the maximum question count. For example, if you create 10 questions, and enable the question bank with 6 questions, the widget will select 6 questions out of the 10 at random whenever a student interacts with your widget. Note that the randomize toggle will be force-enabled when the question bank is turned on, because the question bank feature supersedes it.

1 change: 1 addition & 0 deletions src/assets/img/materia-logo.svg
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file removed src/assets/img/materialogo.png
Binary file not shown.
52 changes: 35 additions & 17 deletions src/controllers/ctl-creator.js
Original file line number Diff line number Diff line change
Expand Up @@ -4,6 +4,10 @@ export const ControllerThisOrThatCreator = function($scope, $timeout, $sanitize,
$scope.questions = []
$scope.currIndex = -1
$scope.dialog = {}
$scope.questionBankModal = false
$scope.enableQuestionBank = false
$scope.questionBankValTemp = 1
$scope.questionBankVal = 1
$scope.tutorial = {
checked: false,
step: 1,
Expand All @@ -12,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 @@ -49,6 +51,12 @@ export const ControllerThisOrThatCreator = function($scope, $timeout, $sanitize,
materiaCallbacks.initExistingWidget = function(title, widget, qset, version, baseUrl) {
$scope.title = title
$scope.tutorial.step = null

if(qset.options) {
$scope.enableQuestionBank = qset.options.enableQuestionBank ? qset.options.enableQuestionBank : false;
$scope.questionBankVal = qset.options.questionBankVal ? qset.options.questionBankVal : 1;
$scope.questionBankValTemp = qset.options.questionBankVal ? qset.options.questionBankVal : 1;
}
materiaCallbacks.onQuestionImportComplete(qset.items)
}

Expand All @@ -63,7 +71,9 @@ export const ControllerThisOrThatCreator = function($scope, $timeout, $sanitize,
const qset = CreatorService.buildQset(
$sanitize($scope.title),
$scope.questions,
$scope.randomizeOrder
$scope.randomizeOrder,
$scope.enableQuestionBank,
$scope.questionBankVal
)
if (qset) {
return Materia.CreatorCore.save($sanitize($scope.title), qset, 2)
Expand Down Expand Up @@ -292,6 +302,12 @@ export const ControllerThisOrThatCreator = function($scope, $timeout, $sanitize,
}
}

$scope.validateQuestionBankVal = function() {
if ($scope.questionBankValTemp >= 1 && $scope.questionBankValTemp <= $scope.questions.length) {
$scope.questionBankVal = $scope.questionBankValTemp
}
}

$scope.updateAnswerType = function(type, currIndex, side) {
let sideIndex = 0
if (side == $scope.CORRECT) {
Expand All @@ -311,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 @@ -325,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 @@ -519,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 Expand Up @@ -567,8 +583,10 @@ export const ControllerThisOrThatCreator = function($scope, $timeout, $sanitize,
}
}

$scope.hideModal = () =>
($scope.dialog.invalid = $scope.dialog.edit = $scope.dialog.intro = $scope.dialog.rearrange = false)
$scope.hideModal = () => {
$scope.dialog.invalid = $scope.dialog.edit = $scope.dialog.intro = $scope.dialog.rearrange = $scope.questionBankModal = false
$scope.questionBankValTemp = $scope.questionBankVal
}

return Materia.CreatorCore.start(materiaCallbacks)
}
25 changes: 21 additions & 4 deletions src/controllers/ctl-player.js
Original file line number Diff line number Diff line change
Expand Up @@ -58,6 +58,23 @@ export const onMateriaStart = ($scope, $sce, instance, qset, version) => {
shuffleArray(_qset.items)
}

// if question bank is enabled, slice the qset to the length specified in the qset options
if(_qset.options && _qset.options.enableQuestionBank === true) {

// don't shuffle if the qset's been shuffled already
if(_qset.options.randomizeOrder === true) {
let qbItemsLength = qset.options.questionBankVal
let rndStart = Math.floor(Math.random() * (_qset.items.length - qbItemsLength + 1))
_qset.items = _qset.items.slice(rndStart, rndStart + qbItemsLength)
}
else {
shuffleArray(_qset.items)
let qbItemsLength = qset.options.questionBankVal
let rndStart = Math.floor(Math.random() * (_qset.items.length - qbItemsLength + 1))
_qset.items = _qset.items.slice(rndStart, rndStart + qbItemsLength)
}
}

$scope.choices = getAllAnswerChoices($sce, _qset)
$scope.questionCount = _qset.items.length

Expand Down Expand Up @@ -313,12 +330,12 @@ export const ControllerThisOrThatPlayer = function($scope, $timeout, $sce) {
}

$scope.getAdjustedTextSize = (text) => {
if (text.length < 140) return 28
if (text.length < 140) return 26
else {
let offset = text.length - 140
let scaleFactor = offset / 12 // adjust this value to increase or decrease the rate of text scaling
let offset = text.length - 80
let scaleFactor = offset / 4 // adjust this value to increase or decrease the rate of text scaling

return (28 - Math.ceil(scaleFactor)) > 16 ? 28 - Math.ceil(scaleFactor) : 16
return (28 - Math.ceil(scaleFactor)) > 15 ? 28 - Math.ceil(scaleFactor) : 15
}
}

Expand Down
10 changes: 9 additions & 1 deletion src/controllers/ctl-scoreScreen.js
Original file line number Diff line number Diff line change
Expand Up @@ -4,6 +4,8 @@ export const ControllerThisOrThatScorescreen = function($scope, $sce) {

const materiaCallbacks = {}

const getHeight = () => Math.ceil(parseFloat(window.getComputedStyle(document.querySelector('html')).height))

const getQuestionIndex = (qset, id) => {
for (let i = 0; i < qset.items.length; i++) {
if (qset.items[i].id == id) return i
Expand All @@ -21,7 +23,7 @@ export const ControllerThisOrThatScorescreen = function($scope, $sce) {
return parseInt((overallDeduction / numIncorrect) * 100)
}

materiaCallbacks.start = (instance, qset, scoreTable, isPreview, qsetVersion) => {
materiaCallbacks.update = (qset, scoreTable) => {
$scope.$apply(() => {
$scope.items = scoreTable.map((question, index) => {

Expand Down Expand Up @@ -60,6 +62,12 @@ export const ControllerThisOrThatScorescreen = function($scope, $sce) {
return item
})
})

Materia.ScoreCore.setHeight(getHeight())
}

materiaCallbacks.start = (instance, qset, scoreTable, isPreview, qsetVersion) => {
materiaCallbacks.update(qset, scoreTable)
}

Materia.ScoreCore.hideResultsTable()
Expand Down
Loading
Loading