Merge branch 'master' into dependabot/npm_and_yarn/minimatch-3.0.8

.github/workflows/release-build.yml

@@ -11,14 +11,14 @@ jobs:
     runs-on: ubuntu-latest
     strategy:
       matrix:
-        node-version: [12.x]
+        node-version: [18.13.0]
 
     steps:
     - name: Checkout code
-      uses: actions/checkout@v2
+      uses: actions/checkout@v5
 
     - name: Test and build with node ${{ matrix.node-version }}
-      uses: actions/setup-node@v1
+      uses: actions/setup-node@v3
       with:
         node-version: ${{ matrix.node-version }}
 
@@ -34,5 +34,5 @@ jobs:
         repo_token: ${{ secrets.GITHUB_TOKEN }}
         file: build/_output/*
         tag: ${{ github.ref }}
-        overwrite: false
+        overwrite: true
         file_glob: true

.github/workflows/test.yml

@@ -5,17 +5,17 @@ jobs:
     runs-on: ubuntu-latest
     strategy:
       matrix:
-        node-version: [12.13.1]
+        node-version: [18.13.0]
 
     steps:
     - name: Checkout code
-      uses: actions/checkout@v2
+      uses: actions/checkout@v4
 
     - name: Setup GIT user
       uses: fregante/setup-git-user@v1
 
     - name: Run tests with Node.js ${{ matrix.node-version }}
-      uses: actions/setup-node@v1
+      uses: actions/setup-node@v3
       with:
         node-version: ${{ matrix.node-version }}
     - run: npm install -g yarn

package.json

@@ -4,7 +4,9 @@
 		"cleanName": "syntax-sorter"
 	},
 	"dependencies": {
-		"materia-widget-development-kit": "2.5.2"
+		"axe-core": "^4.9.1",
+		"materia-widget-development-kit": "~3.0.0",
+		"sass-loader": "^13.3.2"
 	},
 	"devDependencies": {
 		"@axe-core/react": "^4.7.3",
@@ -15,7 +17,6 @@
 		"@testing-library/react": "^12.0.0",
 		"@testing-library/react-hooks": "^7.0.0",
 		"@testing-library/user-event": "^13.1.9",
-		"axe-core": "^4.7.2",
 		"babel-eslint": "^10.1.0",
 		"eslint": "^6.5.1",
 		"eslint-plugin-jsx-a11y": "^6.7.1",
@@ -32,10 +33,10 @@
 		"sass": "^1.24.4"
 	},
 	"scripts": {
-		"start": "webpack-dev-server",
+		"start": "mwdk-start",
 		"lint": "eslint src/**/*.js",
-		"build": "webpack -p",
-		"build-dev": "webpack",
+		"build": "mwdk-build-prod",
+		"build-dev": "mwdk-build-dev",
 		"test": "jest",
 		"test-ci": "TZ='America/New_York' CI=true jest --ci --useStderr --coverage --coverageReporters text-summary cobertura"
 	},
@@ -44,5 +45,5 @@
 	},
 	"author": "University of Central Florida, Center for Distributed Learning",
 	"description": "Syntax Sorter Materia Widget. A tool for arranging sentences or phrases based on the syntactic structure of individual tokens.",
-	"version": "1.2.0"
+	"version": "1.2.1"
 }

sample_score_data.json

@@ -0,0 +1 @@
+[{"overview":{"complete":"1","score":80,"table":[{"message":"Points Lost","value":-20},{"message":"Final Score","value":80}],"referrer_url":"","created_at":1698245380,"auth":""},"details":[{"title":"Responses:","header":["Question Score","The Question","Your Response","Correct Answer"],"table":[{"data":["Arrange the following sentence, which says \u0022I love black cats\u0022, in the proper order.","8344899f-e641-4426-ba79-07a94dffbfba","[{\u0022value\u0022:\u0022J\u0027\u0022,\u0022legend\u0022:\u0022Pronoun\u0022},{\u0022value\u0022:\u0022aime\u0022,\u0022legend\u0022:\u0022Verb\u0022},{\u0022value\u0022:\u0022les\u0022,\u0022legend\u0022:\u0022Article\u0022},{\u0022value\u0022:\u0022chats\u0022,\u0022legend\u0022:\u0022Noun\u0022},{\u0022value\u0022:\u0022noirs\u0022,\u0022legend\u0022:\u0022Adjective\u0022}]","J\u0027,aime,les,chats,noirs"],"data_style":["question","question_id","response","answer"],"score":100,"feedback":null,"type":"SCORE_QUESTION_ANSWERED","style":"full-value","tag":"div","symbol":"%","graphic":"score","display_score":true},{"data":["Now try arranging the same sentence, but in Spanish.","9900e492-c3d0-4fab-bb3f-11d8658084f4","[{\u0022value\u0022:\u0022Amo\u0022,\u0022legend\u0022:\u0022Verb\u0022},{\u0022value\u0022:\u0022a\u0022,\u0022legend\u0022:\u0022Preposition\u0022},{\u0022value\u0022:\u0022los\u0022,\u0022legend\u0022:\u0022Article\u0022},{\u0022value\u0022:\u0022gatos\u0022,\u0022legend\u0022:\u0022Noun\u0022},{\u0022value\u0022:\u0022negros\u0022,\u0022legend\u0022:\u0022Adjective\u0022}]","Amo,a,los,gatos,negros"],"data_style":["question","question_id","response","answer"],"score":100,"feedback":null,"type":"SCORE_QUESTION_ANSWERED","style":"full-value","tag":"div","symbol":"%","graphic":"score","display_score":true},{"data":["Here is the same sentence again, but in Japanese.","70e58ef8-25cf-4b2f-8f69-10673793ee0b","[{\u0022value\u0022:\u0022Kuroi\u0022,\u0022legend\u0022:\u0022Adjective\u0022},{\u0022value\u0022:\u0022neko\u0022,\u0022legend\u0022:\u0022Noun\u0022},{\u0022value\u0022:\u0022ga\u0022,\u0022legend\u0022:\u0022Preposition\u0022},{\u0022value\u0022:\u0022daisuki\u0022,\u0022legend\u0022:\u0022Verb\u0022}]","Kuroi,neko,ga,daisuki"],"data_style":["question","question_id","response","answer"],"score":100,"feedback":null,"type":"SCORE_QUESTION_ANSWERED","style":"full-value","tag":"div","symbol":"%","graphic":"score","display_score":true},{"data":["The tokens below represent the sentence \u0022I love black cats\u0022 in English. Can you arrange them in the proper order based on their parts of speech?","d1ad7291-f4ed-4d08-a469-7a2542ce94b1","[{\u0022value\u0022:\u0022I\u0022,\u0022legend\u0022:\u0022Pronoun\u0022},{\u0022value\u0022:\u0022love\u0022,\u0022legend\u0022:\u0022Verb\u0022},{\u0022value\u0022:\u0022black\u0022,\u0022legend\u0022:\u0022Adjective\u0022},{\u0022value\u0022:\u0022cats\u0022,\u0022legend\u0022:\u0022Noun\u0022}]","I,love,black,cats"],"data_style":["question","question_id","response","answer"],"score":100,"feedback":null,"type":"SCORE_QUESTION_ANSWERED","style":"full-value","tag":"div","symbol":"%","graphic":"score","display_score":true},{"data":["Finally, try arranging the tokens to say \u0022I love black cats\u0022 in French based on parts of speech. A few extra tokens are included, so be careful!","a8beba94-cf26-40a0-84fa-a10b89218467","[{\u0022value\u0022:\u0022aime\u0022,\u0022legend\u0022:\u0022Verb\u0022},{\u0022value\u0022:\u0022conjunction\u0022,\u0022legend\u0022:\u0022Conjunction\u0022},{\u0022value\u0022:\u0022preposition\u0022,\u0022legend\u0022:\u0022Preposition\u0022},{\u0022value\u0022:\u0022J\u0027\u0022,\u0022legend\u0022:\u0022Pronoun\u0022},{\u0022value\u0022:\u0022les\u0022,\u0022legend\u0022:\u0022Article\u0022},{\u0022value\u0022:\u0022chats\u0022,\u0022legend\u0022:\u0022Noun\u0022},{\u0022value\u0022:\u0022noirs\u0022,\u0022legend\u0022:\u0022Adjective\u0022}]","J\u0027,aime,les,chats,noirs"],"data_style":["question","question_id","response","answer"],"score":0,"feedback":null,"type":"SCORE_QUESTION_ANSWERED","style":"no-value","tag":"div","symbol":"%","graphic":"score","display_score":true}]}]}]

src/common.scss

@@ -23,21 +23,19 @@ $defaultPadding: 15px;
 /* icomoon font icons */
 
 @font-face {
-	font-family: "icomoon";
-	src: url("assets/fonts/icomoon.eot?tr4b0z");
-	src: url("assets/fonts/icomoon.eot?tr4b0z#iefix") format("embedded-opentype"),
-		url("assets/fonts/icomoon.ttf?tr4b0z") format("truetype"),
-		url("assets/fonts/icomoon.woff?tr4b0z") format("woff"),
-		url("assets/fonts/icomoon.svg?tr4b0z#icomoon") format("svg");
+	font-family: 'icomoon';
+	src:	url('assets/fonts/icomoon.eot?7h08ro');
+	src: 	url('assets/fonts/icomoon.eot?7h08ro#iefix') format('embedded-opentype'),
+			url('assets/fonts/icomoon.ttf?7h08ro') format('truetype'),
+			url('assets/fonts/icomoon.woff?7h08ro') format('woff'),
+			url('assets/fonts/icomoon.svg?7h08ro#icomoon') format('svg');
 	font-weight: normal;
 	font-style: normal;
 	font-display: block;
 }
-
-[class^="icon-"],
-[class*=" icon-"] {
+[class^="icon-"], [class*=" icon-"] {
 	/* use !important to prevent issues with browser extensions that change fonts */
-	font-family: "icomoon" !important;
+	font-family: 'icomoon' !important;
 	speak: never;
 	font-style: normal;
 	font-weight: normal;
@@ -49,16 +47,19 @@ $defaultPadding: 15px;
 	-webkit-font-smoothing: antialiased;
 	-moz-osx-font-smoothing: grayscale;
 }
-
 .icon-notification:before {
 	content: "\ea08";
-	padding-right: 0.5em;
+	margin-right: 0.25em;
+}
+.icon-cross:before {
+	content: "\ea0f";
+}
+.icon-checkmark:before {
+	content: "\ea10";
 }
-
 .icon-arrow-up2:before {
 	content: "\ea3a";
 }
-
 .icon-arrow-down2:before {
 	content: "\ea3e";
 }
@@ -352,7 +353,7 @@ span.strong {
 		margin: 5px 10px;
 
 		background: #ffffff;
-		border-radius: 50%;
+		border: none;
 		font-size: 1.25em;
 
 		outline: none;
@@ -362,6 +363,21 @@ span.strong {
 			background: $colorAccentHover;
 		}
 
+		.icon {
+			font-size: 0.9em;
+			margin-left: 0.25em;
+		}
+
+		&.correct {
+			font-size:0.8em;
+			background: $colorBGCorrect;
+		}
+
+		&.incorrect-no-attempts {
+			font-size:0.8em;
+			background: $colorBGIncorrect;
+		}
+
 		&.selected {
 			color: #fff;
 			background: $colorAccent;
@@ -406,12 +422,19 @@ span.strong {
 		}
 
 		&.hint-text {
-			margin-top: -15px;
 			display: none;
-			padding-top: 15px;
-			padding-bottom: 15px;
+			padding: 1em;
 			background: white;
 
+			border: solid 2px $colorAccent;
+			border-radius: 2px;
+
+			box-sizing: border-box;
+
+			p {
+				margin: 0;
+			}
+
 			&.show {
 				display: block;
 			}
@@ -439,6 +462,7 @@ span.strong {
 			.fakeout-tip {
 				display: none;
 				font-size: 0.8em;
+				font-weight: bold;
 
 				&.show {
 					display: inline;
@@ -448,15 +472,16 @@ span.strong {
 
 		.token {
 			display: inline-block;
-			padding: 5px 8px;
+			padding: 10px 14px;
 
 			margin: 0 10px 10px 0;
 
-			font-size: 1.5em;
+			font-size: 1.6em;
 			color: #fff;
 
 			border: solid 2px #fff;
-			border-radius: 3px;
+			border-width: 3px 5px;
+			border-radius: 8px;
 
 			cursor: pointer;
 

src/components/creator/creator-app.js

@@ -192,7 +192,7 @@ const CreatorApp = (props) => {
 			<CreatorFakeoutModal></CreatorFakeoutModal>
 			<CreatorErrorModal></CreatorErrorModal>
 			<header className="creator-header">
-				<input value={manager.state.title} onChange={handleTitleUpdate} placeholder="Give Your Widget a Title" />
+				<input value={manager.state.title || undefined} onChange={handleTitleUpdate} placeholder="Give Your Widget a Title" />
 				<button className="toggleLegend" onClick={toggleLegend}>Legend</button>
 				<button className="toggleBank" onClick={toggleBank}>Question Bank</button>
 				<button className="toggleSubmissionSettings" onClick={toggleSubmissionSettings}>Submission Settings</button>

src/components/creator/token.js

@@ -64,7 +64,7 @@ const Token = (props) => {
 			</span>
 			<div className={`close-btn ${hovering ? 'active' : ''}`}
 				onClick={deleteToken}>
-				<div>x</div>
+				<div className='icon-cross'></div>
 			</div>
 		</div>
 	)

src/components/player/aria-live.js

@@ -1,16 +1,16 @@
 import React, { useContext, useEffect, useRef, useState } from 'react'
-import { store } from '../../player-store'
+import { store, DispatchContext } from '../../player-store'
 
 const AriaLive = (props) => {
 
-	const manager = useContext(store)
-    const dispatch = manager.dispatch
-    const [text, setText] = useState(manager.state.liveRegion)
+	const state = useContext(store)
+	// TODO update this pls
+    const [text, setText] = useState(state.liveRegion)
 
 
     useEffect(() => {
-        setText(manager.state.liveRegion)
-    }, [manager.state.liveRegion])
+        setText(state.liveRegion)
+    }, [state.liveRegion])
 
 	return (
 		<div