Merge pull request #70 from ucfopen/dev/1.2.0

Dev/1.2.0

src/_guides/creator.md

@@ -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 ###
 
@@ -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.
+

src/controllers/ctl-creator.js

@@ -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,
@@ -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'
 		]
 	}
@@ -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)
 	}
 
@@ -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)
@@ -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) {
@@ -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) {
@@ -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
 		}
 	}
@@ -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 {
@@ -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)
 }

src/controllers/ctl-player.js

@@ -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
 
@@ -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
 		}
 	}
 

src/controllers/ctl-scoreScreen.js

@@ -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
@@ -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) => {
 
@@ -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()