Adds partial string detection for short answer responses

ucfopen · May 7, 2024 · 690815b · 690815b
1 parent 6080e6f
commit 690815b
Show file tree

Hide file tree

Showing 5 changed files with 72 additions and 18 deletions.
diff --git a/src/creator.html b/src/creator.html
@@ -678,13 +678,27 @@ <h2>
 													ng-repeat="match in answer.matches"
 													ng-click="removeAnswerMatch($index, $parent.$index)">{{match}}</button>
 											</div>
-											<div class="match-options">
-												<input type="checkbox"
-													ng-model="answer.caseSensitive" id="caseSensitive"/>
-												<label for="caseSensitive">Make Matches Case Sensitive</label>
-												<input type="checkbox"
-													ng-model="answer.characterSensitive" id="characterSensitive"/>
-												<label for="characterSensitive">Make Matches Special Character Sensitive ('$', '#', '%', etc.)</label>
+											<div class="match-options-container">
+												<h4>Matching Options</h4>
+												<p>The response entered by the user will be compared to each possible answer provided above. By default, matches are not case sensitive and whitespace is removed.</p>
+												<ul class="match-options">
+													<li>
+														<input type="checkbox"
+															ng-model="answer.caseSensitive" id="caseSensitive"/>
+														<label for="caseSensitive">Make matches case sensitive</label>
+													</li>
+													<li>
+														<input type="checkbox"
+															ng-model="answer.characterSensitive" id="characterSensitive"/>
+														<label for="characterSensitive">Make matches special character sensitive (<b>$</b>, <b>#</b>, <b>%</b>, etc.)</label>
+													</li>
+													<li>
+														<input type="checkbox"
+															ng-model="answer.partialMatches" id="partialMatches"/>
+														<label for="partialMatches">Select if response contains a possible answer (the response <b>cat in the hat</b> will match <b>cat</b>.)</label>
+													</li>
+												</ul>
+
 											</div>
 											<input type="text"
 												ng-model="answer.feedback"

diff --git a/src/src-assets/creator-assets/creator.scss b/src/src-assets/creator-assets/creator.scss
@@ -2488,8 +2488,9 @@ node-creation-selection-dialog {
 	}
 
 	.require-item-btn {
-		// width: 100%;
 		height: 100%;
+		max-height: 140px;
+		min-width: 90px;
 		position: relative;
 		display: flex;
 		flex-direction: column-reverse;
@@ -2850,17 +2851,46 @@ node-creation-selection-dialog {
 					flex-grow: 1;
 					justify-content: space-between;
 
-					.match-options {
+					.match-options-container {
 						display: flex;
-						flex-direction: row;
-						align-items: center;
-						font-size: 0.8em;
-						color: $gray-darker;
+						flex-direction: column;
+						padding: 0.25em 1em 0.25em 0.5em;
+						background: $color-primary;
+						border-radius: 5px;
+
+						h4 {
+							margin: 0.25em 0;
+							font-size: 0.9em;
+						}
+
+						p {
+							margin: 0 0 .5em 0;
+							font-size: 0.8em;
+						}
 
-						#characterSensitive {
-							margin-left: 20px;
+						.match-options {
+							display: flex;
+							flex-direction: column;
+							align-items: flex-start;
+							padding-left: 1em;
+							font-size: 0.8em;
+							color: $gray-darker;
+
+							list-style-type: none;
+
+							li {
+								display: flex;
+								flex-direction: row;
+								align-items: center;
+								margin: 0;
+								input {
+									margin: 0 0.5em;
+								}
+							}
 						}
 					}
+
+
 				}
 
 				.add-match-box {
@@ -2913,6 +2943,7 @@ node-creation-selection-dialog {
 						align-items: center;
 						grid-gap: 10px;
 						height: 100%;
+						max-height: 140px;
 						padding: 10px;
 
 						border: 1px solid $color-accent;
@@ -3002,7 +3033,12 @@ node-creation-selection-dialog {
 
 				&.short-answer-mode {
 
+					.answer-options {
+						align-items: flex-start;
+					}
+
 					.possible-answers-box {
+						position: relative;
 						background: $gray-lighter;
 						border: solid 1px #cccccc;
 						border-radius: 5px;
@@ -3922,7 +3958,6 @@ advanced-question-editor {
 				}
 
 				.require-item-btn {
-					// width: 100%;
 					height: 100%;
 					position: relative;
 					display: flex;

diff --git a/src/src-assets/creator-assets/directives.coffee b/src/src-assets/creator-assets/directives.coffee
@@ -1558,6 +1558,7 @@ angular.module "Adventure"
 					answer.matches = []
 					answer.caseSensitive = false
 					answer.characterSensitive = false
+					answer.partialMatches = false
 
 				# Create the new node associated with the [Unmatched Response] answer
 				newDefaultId = $scope.addNode $scope.nodeTools.target, $scope.BLANK
@@ -1574,6 +1575,7 @@ angular.module "Adventure"
 					isDefault: true
 					caseSensitive: false
 					characterSensitive: false
+					partialMatches: false
 
 				# The new answer has to take the 0 index spot in the answers array
 				node.answers.splice 0, 0, newDefault
@@ -2504,6 +2506,8 @@ angular.module "Adventure"
 				newAnswer.matches = []
 				newAnswer.caseSensitive = false
 				newAnswer.characterSensitive = false
+				newAnswer.partialMatches = false
+
 			$scope.answers.push newAnswer
 
 			# Refresh all answerLinks references as some have changed

diff --git a/src/src-assets/creator-assets/services.coffee b/src/src-assets/creator-assets/services.coffee
@@ -759,6 +759,7 @@ angular.module "Adventure"
 						itemAnswerData.options.matches = answer.matches
 						itemAnswerData.options.caseSensitive = answer.caseSensitive
 						itemAnswerData.options.characterSensitive = answer.characterSensitive
+						itemAnswerData.options.partialMatches = answer.partialMatches or false
 						if answer.isDefault then itemAnswerData.options.isDefault = true
 
 					when "hotspot"
@@ -946,6 +947,7 @@ angular.module "Adventure"
 						nodeAnswer.matches = answer.options.matches
 						nodeAnswer.caseSensitive = answer.options.caseSensitive
 						nodeAnswer.characterSensitive = answer.options.characterSensitive
+						nodeAnswer.partialMatches = answer.options.partialMatches or false
 
 						if answer.options.isDefault then nodeAnswer.isDefault = true
 

diff --git a/src/src-assets/player-assets/player.coffee b/src/src-assets/player-assets/player.coffee
@@ -501,7 +501,6 @@ angular.module('Adventure', ['ngAria', 'ngSanitize'])
 			# Loop through each match to see if it matches the recorded response
 			for j in [0...$scope.q_data.answers[i].options.matches.length]
 
-				# TODO make matching algo more robust
 				match = $scope.q_data.answers[i].options.matches[j]
 
 				# Remove whitespace
@@ -520,7 +519,7 @@ angular.module('Adventure', ['ngAria', 'ngSanitize'])
 					match = match.toLowerCase()
 					response = response.toLowerCase()
 
-				if match is response
+				if ($scope.q_data.answers[i].options.partialMatches and response.includes(match)) or match is response
 					requiredItems = $scope.q_data.answers[i].options.requiredItems || $scope.q_data.answers[i].requiredItems
 					missingItems = $scope.checkInventory(requiredItems)