Issue/45 one at a time

src/creator.coffee

@@ -81,6 +81,8 @@ SurveyWidget.controller 'SurveyWidgetController', [ '$scope','$mdToast','$mdDial
 		containment: ".drag-choice"
 	}
 
+	$scope.OneQuestionAtATime = false
+
 	questionCount = 0
 	originatorEv = null
 
@@ -94,6 +96,7 @@ SurveyWidget.controller 'SurveyWidgetController', [ '$scope','$mdToast','$mdDial
 		$scope.$apply ->
 			$scope.title = title
 			$scope.groups = qset.options.groups
+			$scope.OneQuestionAtATime = qset.options.OneQuestionAtATime
 			for item, index in qset.items
 				$scope.cards.push
 					question: sanitizeHelper.desanitize(item.questions[0].text)
@@ -341,7 +344,7 @@ SurveyWidget.controller 'SurveyWidgetController', [ '$scope','$mdToast','$mdDial
 		_isValid = validation()
 
 		if _isValid
-			qset = Resource.buildQset $scope.title, $scope.cards, $scope.groups
+			qset = Resource.buildQset $scope.title, $scope.cards, $scope.groups, $scope.OneQuestionAtATime
 			if qset then Materia.CreatorCore.save $scope.title, qset
 		else
 			Materia.CreatorCore.cancelSave "Please make sure every question is complete."
@@ -389,7 +392,7 @@ SurveyWidget.controller 'SurveyWidgetController', [ '$scope','$mdToast','$mdDial
 ]
 
 SurveyWidget.factory 'Resource', ['$sanitize', 'sanitizeHelper', ($sanitize, sanitizeHelper) ->
-	buildQset: (title, questions, groups) ->
+	buildQset: (title, questions, groups, OneQuestionAtATime) ->
 		qsetItems = []
 		qset = {}
 
@@ -402,7 +405,7 @@ SurveyWidget.factory 'Resource', ['$sanitize', 'sanitizeHelper', ($sanitize, san
 			if item then qsetItems.push item
 
 		qset.items = qsetItems
-		qset.options = {groups: groups}
+		qset.options = {groups: groups, OneQuestionAtATime: OneQuestionAtATime}
 		return qset
 
 	processQsetItem: (item) ->

src/creator.html

@@ -394,9 +394,16 @@
 							Add Question
 						</md-button>
 					</div>
+					<div layout layout-align="center center" ng-show="ready">
+						<md-checkbox class="md-accent md-raised" ng-model="OneQuestionAtATime">
+							One Question At A Time
+						</md-checkbox>
+					</div>
 				</div>
 			</div>
 
+
+
 			<!-- Type Info Dialog -->
 			<div style="visibility: hidden">
 				<div class="md-dialog-container" id="info-dialog-container">

src/player.coffee

@@ -12,6 +12,10 @@ SurveyWidget.controller 'SurveyWidgetEngineCtrl', ['$scope', '$mdToast','$mdDial
 	$scope.instance = null
 	$scope.responses = []
 
+	#functionality for one question at a time
+	$scope.questions_displayed = []
+	$scope.question_index = 0
+
 	$scope.horizontalScale = 'horizontal-scale'
 	$scope.dropDown = 'drop-down'
 	$scope.verticalList = 'vertical-list'
@@ -46,10 +50,15 @@ SurveyWidget.controller 'SurveyWidgetEngineCtrl', ['$scope', '$mdToast','$mdDial
 	locateAndScrollToIncomplete = () ->
 		for index, question of $scope.qset.items
 			if $scope.isIncomplete(index)
-				cardElement = document.getElementsByClassName("card")[index]
-				cardElement.scrollIntoView()
-				$mdLiveAnnouncer.announce("Question " + ( parseInt(index) + 1 ) + " must be completed.")
-				return
+				if $scope.qset.options.OneQuestionAtATime
+					$scope.questions_displayed = [$scope.qset.items[index]]
+					$scope.question_index = index
+					break
+				else
+					cardElement = document.getElementsByClassName("card")[index]
+					cardElement.scrollIntoView()
+					$mdLiveAnnouncer.announce("Question " + ( parseInt(index) + 1 ) + " must be completed.")
+					return
 
 	$scope.showToast = (message) ->
 		$mdToast.show(
@@ -67,6 +76,10 @@ SurveyWidget.controller 'SurveyWidgetEngineCtrl', ['$scope', '$mdToast','$mdDial
 		$scope.instance = instance
 		$scope.qset = desanitizeQset(qset)
 		$scope.progress = 0
+		if $scope.qset.options.OneQuestionAtATime
+			$scope.questions_displayed = [$scope.qset.items[0]]
+		else $scope.questions_displayed = $scope.qset.items
+		initCheckAllThatApply()
 		$scope.$apply()
 
 	shuffle = (array) ->
@@ -232,6 +245,24 @@ SurveyWidget.controller 'SurveyWidgetEngineCtrl', ['$scope', '$mdToast','$mdDial
 			$scope.showToast "Must complete all questions."
 			locateAndScrollToIncomplete()
 		return
+
+	$scope.previous = -> 
+		if $scope.question_index > 0
+			$scope.question_index--
+			$scope.questions_displayed = [$scope.qset.items[$scope.question_index]]
+
+	$scope.next = -> 
+		if $scope.question_index < ($scope.qset.items.length - 1)
+			$scope.question_index++
+			$scope.questions_displayed = [$scope.qset.items[$scope.question_index]]
+
+	#initializes all values of Check All That Apply questions to false
+	initCheckAllThatApply = () ->
+		for qIndex, question of $scope.qset.items #loop thru questions to find check all that apply questions
+			if question.options.questionType == 'check-all-that-apply'
+				$scope.responses[qIndex] = []
+				for aIndex of question.answers #loop thru answers and set them to false
+					$scope.responses[qIndex][aIndex] = false
 
 	Materia.Engine.start($scope)
-]
+]

src/player.html

@@ -41,13 +41,13 @@ <h2 aria-label="widget title {{instance.name}}">{{instance.name}}</h2>
 
 					<md-card class="md-whiteframe-3dp card"
 						role="region"
-						aria-label="question {{$index + 1}}"
-						ng-repeat="question in qset.items"
-						ng-class="{'incomplete': showIncomplete && isIncomplete($index)}">
+						aria-label="question {{(qset.options.OneQuestionAtATime ? question_index : $index) + 1}}"
+						ng-repeat="question in questions_displayed"
+						ng-class="{'incomplete': showIncomplete && isIncomplete(qset.options.OneQuestionAtATime ? question_index : $index)}">
 						<div class="card-right" layout="column">
 							<md-card-title class="card-title">
-								<h3 id="question {{$index + 1}}"
-									aria-label="question {{$index + 1}}: {{question.questions[0].text}}"
+								<h3 id="question {{(qset.options.OneQuestionAtATime ? question_index : $index) + 1}}"
+									aria-label="question {{(qset.options.OneQuestionAtATime ? question_index : $index) + 1}}: {{question.questions[0].text}}"
 									class="md-headline">{{question.questions[0].text}}</h3>
 							</md-card-title>
 							<span class='card-media-container'
@@ -59,7 +59,7 @@ <h2 aria-label="widget title {{instance.name}}">{{instance.name}}</h2>
 
 							<!-- Scale Style -->
 							<md-card-actions layout layout-align="start start" ng-if="question.options.displayStyle == horizontalScale">
-								<md-radio-group layout="row" ng-model="responses[$index]" class="radio-spacing" ng-change="updateCompleted()">
+								<md-radio-group layout="row" ng-model="responses[qset.options.OneQuestionAtATime ? question_index : $index]" class="radio-spacing" ng-change="updateCompleted()">
 										<md-radio-button
 											ng-repeat="answer in question.answers"
 											value={{$index}}>
@@ -72,10 +72,10 @@ <h2 aria-label="widget title {{instance.name}}">{{instance.name}}</h2>
 							<md-card-actions layout layout-align="start start" ng-if="question.options.displayStyle == dropDown">
 								<md-input-container layout="row">
 									<md-select class="dropdown-answer"
-										ng-model="responses[$index]"
+										ng-model="responses[qset.options.OneQuestionAtATime ? question_index : $index]"
 										aria-label="Answer"
 										ng-change="updateCompleted()"
-										md-selected-text="dropDownAnswer($index, responses[$index])">
+										md-selected-text="dropDownAnswer(qset.options.OneQuestionAtATime ? question_index : $index, responses[qset.options.OneQuestionAtATime ? question_index : $index])"> 
 										<md-option class="dropdown-answer-element"
 											ng-repeat="answer in question.answers"
 											value="{{$index}}">
@@ -99,17 +99,15 @@ <h2 aria-label="widget title {{instance.name}}">{{instance.name}}</h2>
 								<md-input-container layout="column" class="checkbox-group">
 											<md-checkbox
 												ng-repeat="answer in question.answers"
-												ng-model="responses[$parent.$index][$index]"
-												ng-init="responses[$parent.$index][$index] = false"
-												ng-change="updateCheckAllThatApply($parent.$index, $index)"
-												aria-label="Option {{$index+1}} of {{question.answers.length}}: {{answer.text}}">
+												ng-model="responses[qset.options.OneQuestionAtATime ? question_index : $parent.$index][$index]"
+												ng-change="updateCheckAllThatApply(qset.options.OneQuestionAtATime ? question_index : $parent.$index, $index)"
+												aria-label="Option {{$index+1}} of {{question.answers.length}}: {{answer.text}}"> 
 												{{answer.text}}
 											</md-checkbox>
 											<div layout="row" ng-if="question.options.enableNoneOfTheAbove">
 												<md-checkbox
-													ng-model="responses[$parent.$index][question.answers.length]"
-													ng-init="responses[$parent.$index][question.answers.length] = false"
-													ng-change="updateCheckAllThatApply($parent.$index, question.answers.length)">
+													ng-model="responses[qset.options.OneQuestionAtATime ? question_index : $parent.$index][question.answers.length]"
+													ng-change="updateCheckAllThatApply(qset.options.OneQuestionAtATime ? question_index : $parent.$index, question.answers.length)"> 
 													{{question.options.noneOfTheAboveText}}
 												</md-checkbox>
 												<button class="info-tooltip-button" role="tooltip" ng-click="showHelpDialog($event, 'Selecting this option will uncheck all other responses.')" aria-label="Selecting this option will uncheck all other responses.">
@@ -122,7 +120,7 @@ <h2 aria-label="widget title {{instance.name}}">{{instance.name}}</h2>
 							<!-- Free Response Style -->
 							<md-card-actions layout ng-if="question.options.displayStyle == textArea">
 								<md-input-container class="md-block" flex>
-									<textarea type="text" ng-model="responses[$index]" aria-label="{{question.answers[0].text}}" ng-change="updateCompleted()" placeholder="{{question.answers[0].text}}"></textarea>
+									<textarea type="text" ng-model="responses[qset.options.OneQuestionAtATime ? question_index : $index]" aria-label="{{question.answers[0].text}}" ng-change="updateCompleted()" placeholder="{{question.answers[0].text}}"></textarea>
 								</md-input-container>
 							</md-card-actions>
 						</div>
@@ -135,7 +133,7 @@ <h2 aria-label="widget title {{instance.name}}">{{instance.name}}</h2>
 							<div class="sequence-item-container"
 								layout="column"
 								sv-root
-								sv-on-sort="markSequenceComplete($parent.$index)"
+								sv-on-sort="markSequenceComplete(qset.options.OneQuestionAtATime ? question_index : $parent.$index)"
 								sv-part="question.answers"
 								role="listbox">
 								<p class='instructions'>
@@ -146,13 +144,13 @@ <h2 aria-label="widget title {{instance.name}}">{{instance.name}}</h2>
 									</span>
 								</p>
 								<div layout="row"
-									ng-if="showIncomplete && isIncomplete($parent.$index)">
+									ng-if="showIncomplete && isIncomplete(qset.options.OneQuestionAtATime ? question_index : $parent.$index)">
 									<md-input-container>
 										<md-button
 											class="md-raised md-primary"
 											aria-label="Accept Order"
-											ng-click="markSequenceComplete($parent.$index)"
-											ng-model="responses[$parent.$index]">
+											ng-click="markSequenceComplete(qset.options.OneQuestionAtATime ? question_index : $parent.$index)"
+											ng-model="responses[qset.options.OneQuestionAtATime ? question_index : $parent.$index]"> 
 											<md-tooltip md-direction="below">
 												Click to accept the current order of these items
 											</md-tooltip>
@@ -164,7 +162,7 @@ <h2 aria-label="widget title {{instance.name}}">{{instance.name}}</h2>
 									ng-repeat="item in question.answers"
 									sv-element="dragOpts"
 									class="md-block sequence-item"
-									ng-keydown="handleSequenceKeyDown($event, $parent.$index, $index)"
+									ng-keydown="handleSequenceKeyDown($event, qset.options.OneQuestionAtATime ? question_index : $parent.$index, $index)"
 									tabindex="0"
 									role="option"
 									flex>
@@ -180,7 +178,7 @@ <h2 aria-label="widget title {{instance.name}}">{{instance.name}}</h2>
 										tabindex="-1">
 										<i class="material-icons"
 											tabindex="-1"
-											ng-click="moveSequenceItemUp($parent.$index, $index)">
+											ng-click="moveSequenceItemUp(qset.options.OneQuestionAtATime ? question_index : $parent.$index, $index)">
 											&#xE316;
 											<md-tooltip md-direction="below">Move Item Up</md-tooltip>
 										</i>
@@ -190,7 +188,7 @@ <h2 aria-label="widget title {{instance.name}}">{{instance.name}}</h2>
 										tabindex="-1">
 										<i class="material-icons"
 											tabindex="-1"
-											ng-click="moveSequenceItemDown($parent.$index, $index)">
+											ng-click="moveSequenceItemDown(qset.options.OneQuestionAtATime ? question_index : $parent.$index, $index)">
 											&#xE313;
 											<md-tooltip md-direction="below">Move Item Down</md-tooltip>
 										</i>
@@ -202,18 +200,28 @@ <h2 aria-label="widget title {{instance.name}}">{{instance.name}}</h2>
 							</div>
 						</md-card-actions>
 
+					<!--Buttons for previous, next, submit-->
 					</md-card>
-					<md-button class="md-raised bottom-submit" ng-class="{'md-accent': progress == 100}" aria-label="Submit" ng-click="submit()">
-						Submit
-					</md-button>
+					<div class="buttons">
+						<md-button class="md-raised previous" ng-if="qset.options.OneQuestionAtATime" ng-click="previous()">
+							Previous
+						</md-button>
+						<md-button class="md-raised bottom-submit" ng-class="{'md-accent': progress == 100}" aria-label="Submit" ng-click="submit()">
+							Submit
+						</md-button>
+						<md-button class="md-raised next" ng-if="qset.options.OneQuestionAtATime" ng-click="next()">
+							Next
+						</md-button>
+
+					</div>
 				</div>
 			</div>
 			<!-- Type Info Dialog -->
 			<div style="visibility: hidden">
 				<div class="md-dialog-container" id="info-dialog-container">
 					<md-dialog id="info-dialog" aria-label="Info Dialog">
 						<md-dialog-content>
-								<div class="md-dialog-content">
+							<div class="md-dialog-content">
 								{{dialogText}}
 							</div>
 						</md-dialog-content>

src/player.scss

@@ -238,12 +238,26 @@ button.info-tooltip-button {
 	}
 }
 
+.buttons {
+	display: flex;
+	justify-content: space-between;
+}
+
 .bottom-submit {
-	position: relative;
-	left: 50%;
-	transform: translate(-50% , 0);
-	max-width: 600px;
-	padding: 0px 6px 0px 6px;
-	margin: 6px 0px 18px 0px;
+	width: 10%;
+	font-size:1.1em;
+}
+
+.previous {
+	left: 25px;
+	width: 10%;
+	font-size:1.1em;
+}
+
+.next {
+	right: 25px;
+	width: 10%;
 	font-size:1.1em;
 }
+
+

yarn.lock

@@ -5405,7 +5405,7 @@ next-tick@^1.0.0:
   resolved "https://registry.yarnpkg.com/next-tick/-/next-tick-1.0.0.tgz#ca86d1fe8828169b0120208e3dc8424b9db8342c"
   integrity sha1-yobR/ogoFpsBICCOPchCS524NCw=
 
-"ngmodal@github:ucfcdl/ngModal#v1.2.2":
+ngmodal@ucfcdl/ngModal#v1.2.2:
   version "1.2.2"
   resolved "https://codeload.github.com/ucfcdl/ngModal/tar.gz/6abad982bdb8f258ffcdc20316a907c2292399d2"