better quiz blur practice
This commit is contained in:
lingdocs
parent
1535a8b174
commit
9aa84366e2
|
|
@ -17,7 +17,7 @@
|
|||
"markdown-to-jsx": "^7.1.3",
|
||||
"react": "^17.0.2",
|
||||
"react-bootstrap": "^1.6.4",
|
||||
"react-countdown-circle-timer": "^2.5.4",
|
||||
"react-countdown-circle-timer": "^3.0.9",
|
||||
"react-dom": "^17.0.2",
|
||||
"react-ga": "^3.3.0",
|
||||
"react-media": "^1.10.0",
|
||||
|
|
|
|||
|
|
@ -20,14 +20,13 @@ import {
|
|||
} from "@lingdocs/pashto-inflector";
|
||||
const errorVibration = 200;
|
||||
|
||||
function GameCore<T>({ questions, Display, timeLimit, Instructions, studyLink, id, onStartStop }:{
|
||||
function GameCore<T>({ questions, Display, timeLimit, Instructions, studyLink, id }:{
|
||||
id: string,
|
||||
studyLink: string,
|
||||
Instructions: (props: { opts?: Types.TextOptions }) => JSX.Element,
|
||||
questions: () => QuestionGenerator<T>,
|
||||
Display: (props: QuestionDisplayProps<T>) => JSX.Element,
|
||||
timeLimit: number;
|
||||
onStartStop: (a: "start" | "stop") => void,
|
||||
}) {
|
||||
// TODO: report pass with id to user info
|
||||
const rewardRef = useRef<RewardElement | null>(null);
|
||||
|
|
@ -68,7 +67,6 @@ function GameCore<T>({ questions, Display, timeLimit, Instructions, studyLink, i
|
|||
}).catch(console.error);
|
||||
}
|
||||
function handleFinish() {
|
||||
onStartStop("stop");
|
||||
setFinish("pass");
|
||||
rewardRef.current?.rewardMe();
|
||||
if (!user) return;
|
||||
|
|
@ -80,12 +78,10 @@ function GameCore<T>({ questions, Display, timeLimit, Instructions, studyLink, i
|
|||
handleResult(result);
|
||||
}
|
||||
function handleQuit() {
|
||||
onStartStop("stop");
|
||||
setFinish(undefined);
|
||||
setCurrent(undefined);
|
||||
}
|
||||
function handleRestart() {
|
||||
onStartStop("start");
|
||||
const newQuestionBox = questions();
|
||||
const { value } = newQuestionBox.next();
|
||||
// just for type safety -- the generator will have at least one question
|
||||
|
|
@ -96,7 +92,6 @@ function GameCore<T>({ questions, Display, timeLimit, Instructions, studyLink, i
|
|||
setTimerKey(prev => prev + 1);
|
||||
}
|
||||
function handleTimeOut() {
|
||||
onStartStop("stop");
|
||||
setFinish("time out");
|
||||
navigator.vibrate(errorVibration);
|
||||
}
|
||||
|
|
@ -113,8 +108,8 @@ function GameCore<T>({ questions, Display, timeLimit, Instructions, studyLink, i
|
|||
: typeof finish === "object"
|
||||
? "danger"
|
||||
: "primary";
|
||||
return <div>
|
||||
<div className="text-center" style={{ minHeight: "200px" }}>
|
||||
return <>
|
||||
<div className="text-center" style={{ minHeight: "200px", zIndex: 10, position: "relative" }}>
|
||||
<div className="progress" style={{ height: "5px" }}>
|
||||
<div className={`progress-bar bg-${progressColor}`} role="progressbar" style={{ width: getProgressWidth() }} />
|
||||
</div>
|
||||
|
|
@ -123,10 +118,11 @@ function GameCore<T>({ questions, Display, timeLimit, Instructions, studyLink, i
|
|||
key={timerKey}
|
||||
isPlaying={!!current && !finish}
|
||||
size={30}
|
||||
strokeWidth={3}
|
||||
colors={["#555555", "#F7B801", "#A30000"]}
|
||||
colorsTime={[timeLimit, timeLimit*0.33, 0]}
|
||||
strokeWidth={4}
|
||||
strokeLinecap="square"
|
||||
duration={timeLimit}
|
||||
colors="#555555"
|
||||
onComplete={handleTimeOut}
|
||||
/>
|
||||
<button onClick={handleQuit} className="btn btn-outline-secondary btn-sm mr-2">Quit</button>
|
||||
|
|
@ -160,13 +156,11 @@ function GameCore<T>({ questions, Display, timeLimit, Instructions, studyLink, i
|
|||
<div>The correct answer was:</div>
|
||||
{finish?.answer}
|
||||
</div>}
|
||||
<div>
|
||||
<button className="btn btn-secondary mt-3" onClick={handleRestart}>Try Again</button>
|
||||
<div className="mt-3">
|
||||
<button className="btn btn-success mr-2" onClick={handleRestart}>Try Again</button>
|
||||
<button className="btn btn-danger ml-2" onClick={handleQuit}>Quit</button>
|
||||
</div>
|
||||
<div>
|
||||
<button className="btn btn-secondary mt-3" onClick={handleQuit}>Quit</button>
|
||||
</div>
|
||||
<div onClick={() => onStartStop("stop")} className="mt-3">
|
||||
<div onClick={handleQuit} className="my-3">
|
||||
<Link to={studyLink}>
|
||||
<button className="btn btn-outline-secondary"><span role="img" aria-label="">📚</span> Study more</button>
|
||||
</Link>
|
||||
|
|
@ -175,7 +169,17 @@ function GameCore<T>({ questions, Display, timeLimit, Instructions, studyLink, i
|
|||
</div>
|
||||
</Reward>
|
||||
</div>
|
||||
</div>;
|
||||
{(current && finish === undefined) && <div style={{
|
||||
position: "absolute",
|
||||
backgroundColor: "rgba(255, 255, 255, 0.3)",
|
||||
backdropFilter: "blur(10px)",
|
||||
top: "0px",
|
||||
left: "0px",
|
||||
width: "100%",
|
||||
height: "100%",
|
||||
zIndex: 6,
|
||||
}}></div>}
|
||||
</>;
|
||||
}
|
||||
|
||||
function failMessage(progress: Progress | undefined, finish: "time out" | { msg: "fail", answer: JSX.Element }): string {
|
||||
|
|
|
|||
|
|
@ -1,44 +1,22 @@
|
|||
import { useUser } from "../user-context";
|
||||
import { useState } from "react";
|
||||
|
||||
function GameDisplay({ record: { title, Game, id } }: { record: GameRecord }) {
|
||||
const { user } = useUser();
|
||||
const [running, setRunning] = useState<boolean>(false);
|
||||
const completed = user?.tests.some((t) => (
|
||||
// TODO: Or if it's in the locally stored (unposted test results)
|
||||
(t.done === true) && (t.id === id)
|
||||
));
|
||||
function onStartStop(a: "start" | "stop") {
|
||||
if (a === "start" && !running) {
|
||||
setRunning(true);
|
||||
}
|
||||
if (a === "stop") {
|
||||
setRunning(false);
|
||||
}
|
||||
}
|
||||
return <>
|
||||
{running && <div style={{
|
||||
position: "absolute",
|
||||
backgroundColor: "rgba(255, 255, 255, 0.3)",
|
||||
backdropFilter: "blur(7px)",
|
||||
top: "0px",
|
||||
left: "0px",
|
||||
width: "100%",
|
||||
height: "100%",
|
||||
zIndex: 2,
|
||||
}}></div>}
|
||||
<div style={{ position: "relative", zIndex: 9999 }}>
|
||||
<div className="d-flex flex-row justify-content-between align-items-center">
|
||||
<div>
|
||||
<h4 className="my-4"><span role="img" aria-label="">🎮</span> {title}</h4>
|
||||
</div>
|
||||
<div>
|
||||
<h4>{completed ? "✅" : ""}</h4>
|
||||
</div>
|
||||
return <div>
|
||||
<div className="d-flex flex-row justify-content-between align-items-center">
|
||||
<div>
|
||||
<h4 className="my-4"><span role="img" aria-label="">🎮</span> {title}</h4>
|
||||
</div>
|
||||
<div>
|
||||
<h4>{completed ? "✅" : ""}</h4>
|
||||
</div>
|
||||
{Game(onStartStop)}
|
||||
</div>
|
||||
</>
|
||||
<Game />
|
||||
</div>;
|
||||
}
|
||||
|
||||
export default GameDisplay;
|
||||
|
|
@ -22,10 +22,10 @@ function GamesBrowser() {
|
|||
return <div key={id}>
|
||||
<div className="d-flex flex-row justify-content-between align-items-center">
|
||||
<div>
|
||||
<h5 className="my-4 clickable" onClick={() => handleTitleClick(id)}>
|
||||
<h4 className="my-4 clickable" onClick={() => handleTitleClick(id)}>
|
||||
<i className={`fas fa-caret-${open ? "down" : "right"}`}></i> {title}
|
||||
{` `}
|
||||
</h5>
|
||||
</h4>
|
||||
</div>
|
||||
<div>
|
||||
<h4>
|
||||
|
|
@ -37,7 +37,7 @@ function GamesBrowser() {
|
|||
</div>
|
||||
</div>
|
||||
<SmoothCollapse expanded={open}>
|
||||
{Game(() => null)}
|
||||
<Game />
|
||||
</SmoothCollapse>
|
||||
</div>
|
||||
})}
|
||||
|
|
|
|||
|
|
@ -6,7 +6,7 @@ function makeGameRecord(
|
|||
title: string,
|
||||
id: string,
|
||||
studyLink: string,
|
||||
game: (id: string, link: string) => ((s: (a: "start" | "stop") => void) => JSX.Element),
|
||||
game: (id: string, link: string) => () => JSX.Element,
|
||||
): GameRecord {
|
||||
return {
|
||||
title,
|
||||
|
|
@ -20,75 +20,75 @@ export const nounGenderGame1 = makeGameRecord(
|
|||
"Identify Noun Genders - Level 1",
|
||||
"gender-nouns-1",
|
||||
"/nouns/nouns-gender#gender-by-ending",
|
||||
(id, link) => (s: (a: "start" | "stop") => void) => <GenderGame id={id} level={1} link={link} onStartStop={s} />,
|
||||
(id, link) => () => <GenderGame id={id} level={1} link={link} />,
|
||||
);
|
||||
export const nounGenderGame2 = makeGameRecord(
|
||||
"Identify Noun Genders - Level 2",
|
||||
"gender-nouns-2",
|
||||
"/nouns/nouns-gender#exceptions",
|
||||
(id, link) => (s: (a: "start" | "stop") => void) => <GenderGame id={id} level={2} link={link} onStartStop={s} />,
|
||||
(id, link) => () => <GenderGame id={id} level={2} link={link} />,
|
||||
);
|
||||
export const unisexNounGame = makeGameRecord(
|
||||
"Changing genders on unisex nouns",
|
||||
"unisex-nouns-1",
|
||||
"/nouns/nouns-unisex/",
|
||||
(id, link) => (s: (a: "start" | "stop") => void) => <UnisexNounGame id={id} link={link} onStartStop={s} />,
|
||||
(id, link) => () => <UnisexNounGame id={id} link={link} />,
|
||||
);
|
||||
|
||||
export const equativeGamePresent = makeGameRecord(
|
||||
"Write the present equative",
|
||||
"equative-present",
|
||||
"/equatives/present-equative/",
|
||||
(id, link) => (s: (a: "start" | "stop") => void) => <EquativeGame id={id} link={link} level="present" onStartStop={s} />,
|
||||
(id, link) => () => <EquativeGame id={id} link={link} level="present" />,
|
||||
);
|
||||
|
||||
export const equativeGameHabitual = makeGameRecord(
|
||||
"Write the habitual equative",
|
||||
"equative-habitual",
|
||||
"/equatives/habitual-equative/",
|
||||
(id, link) => (s: (a: "start" | "stop") => void) => <EquativeGame id={id} link={link} level="habitual" onStartStop={s} />,
|
||||
(id, link) => () => <EquativeGame id={id} link={link} level="habitual" />,
|
||||
);
|
||||
|
||||
export const equativeGameSubjunctive = makeGameRecord(
|
||||
"Write the subjunctive equative",
|
||||
"equative-subjunctive",
|
||||
"/equatives/other-equatives/#subjunctive-equative",
|
||||
(id, link) => (s: (a: "start" | "stop") => void) => <EquativeGame id={id} link={link} level="subjunctive" onStartStop={s} />,
|
||||
(id, link) => () => <EquativeGame id={id} link={link} level="subjunctive" />,
|
||||
);
|
||||
|
||||
export const equativeGameFuture = makeGameRecord(
|
||||
"Write the future equative",
|
||||
"equative-future",
|
||||
"/equatives/other-equatives/#future-equative",
|
||||
(id, link) => (s: (a: "start" | "stop") => void) => <EquativeGame id={id} link={link} level="future" onStartStop={s} />,
|
||||
(id, link) => () => <EquativeGame id={id} link={link} level="future" />,
|
||||
);
|
||||
|
||||
export const equativeGamePast = makeGameRecord(
|
||||
"Write the past equative",
|
||||
"equative-past",
|
||||
"/equatives/other-equatives/#past-equative",
|
||||
(id, link) => (s: (a: "start" | "stop") => void) => <EquativeGame id={id} link={link} level="past" onStartStop={s} />,
|
||||
(id, link) => () => <EquativeGame id={id} link={link} level="past" />,
|
||||
);
|
||||
|
||||
export const equativeGameWouldBe = makeGameRecord(
|
||||
'Write the "would be" equative',
|
||||
"equative-would-be",
|
||||
"/equatives/other-equatives/#would-be-equative",
|
||||
(id, link) => (s: (a: "start" | "stop") => void) => <EquativeGame id={id} link={link} level="wouldBe" onStartStop={s} />,
|
||||
(id, link) => () => <EquativeGame id={id} link={link} level="wouldBe" />,
|
||||
);
|
||||
|
||||
export const equativeGamePastSubjunctive = makeGameRecord(
|
||||
'Write the past subjunctive equative',
|
||||
"equative-past-subjunctive",
|
||||
"/equatives/other-equatives/#past-subjunctive",
|
||||
(id, link) => (s: (a: "start" | "stop") => void) => <EquativeGame id={id} link={link} level="pastSubjunctive" onStartStop={s} />,
|
||||
(id, link) => () => <EquativeGame id={id} link={link} level="pastSubjunctive" />,
|
||||
);
|
||||
|
||||
export const equativeGameAll = makeGameRecord(
|
||||
'Write the equative (summary)',
|
||||
"equative-past-summary",
|
||||
"/equatives/other-equatives",
|
||||
(id, link) => (s: (a: "start" | "stop") => void) => <EquativeGame id={id} link={link} level="all" onStartStop={s} />,
|
||||
(id, link) => () => <EquativeGame id={id} link={link} level="all" />,
|
||||
);
|
||||
|
||||
const games: { chapter: string, items: GameRecord[] }[] = [
|
||||
|
|
|
|||
|
|
@ -67,7 +67,7 @@ const pronounTypes = [
|
|||
[T.Person.ThirdPlurMale, T.Person.ThirdPlurFemale],
|
||||
];
|
||||
|
||||
export default function EquativeGame({ id, link, level, onStartStop }: { id: string, link: string, level: T.EquativeTense | "all", onStartStop: (a: "start" | "stop") => void }) {
|
||||
export default function EquativeGame({ id, link, level }: { id: string, link: string, level: T.EquativeTense | "all" }) {
|
||||
function* questions (): Generator<Current<Question>> {
|
||||
let pool = [...pronounTypes];
|
||||
function makeRandPronoun(): T.PronounSelection {
|
||||
|
|
@ -199,7 +199,6 @@ export default function EquativeGame({ id, link, level, onStartStop }: { id: str
|
|||
}
|
||||
|
||||
return <GameCore
|
||||
onStartStop={onStartStop}
|
||||
studyLink={link}
|
||||
questions={questions}
|
||||
id={id}
|
||||
|
|
|
|||
|
|
@ -86,7 +86,7 @@ const exceptions: Record<string, CategorySet> = {
|
|||
|
||||
const amount = 35;
|
||||
|
||||
export default function GenderGame({level, id, link, onStartStop }: { level: 1 | 2, id: string, link: string, onStartStop: (a: "start" | "stop") => void }) {
|
||||
export default function GenderGame({level, id, link }: { level: 1 | 2, id: string, link: string }) {
|
||||
function* questions () {
|
||||
const wordPool = {...types};
|
||||
const exceptionsPool = {...exceptions};
|
||||
|
|
@ -110,10 +110,15 @@ export default function GenderGame({level, id, link, onStartStop }: { level: 1 |
|
|||
}
|
||||
|
||||
function Display({ question, callback }: QuestionDisplayProps<T.DictionaryEntry>) {
|
||||
function check(gender: "m" | "f") {
|
||||
const correct = !nounNotIn(gender === "m" ? mascNouns : femNouns)(question);
|
||||
function check(gender: T.Gender) {
|
||||
const nounGender: T.Gender = nounNotIn(mascNouns)(question) ? "fem" : "masc";
|
||||
const correct = gender === nounGender;
|
||||
callback(!correct
|
||||
? <div>ANSWER HERE</div>
|
||||
? <div className="my-4 text-center">
|
||||
<button style={{ background: genderColors[nounGender === "masc" ? "m" : "f"], color: "black" }} className="btn btn-lg" disabled>
|
||||
{nounGender === "masc" ? "Masculine" : "Feminine"}
|
||||
</button>
|
||||
</div>
|
||||
: true);
|
||||
}
|
||||
return <div>
|
||||
|
|
@ -127,8 +132,8 @@ export default function GenderGame({level, id, link, onStartStop }: { level: 1 |
|
|||
]}</Examples>
|
||||
</div>
|
||||
<div className="mt-4">
|
||||
<button style={{ background: genderColors.f, color: "black" }} className="btn btn-lg mr-3" onClick={() => check("f")}>Feminine</button>
|
||||
<button style={{ background: genderColors.m, color: "black" }} className="btn btn-lg ml-3" onClick={() => check("m")}>Masculine</button>
|
||||
<button style={{ background: genderColors.f, color: "black" }} className="btn btn-lg mr-3" onClick={() => check("fem")}>Feminine</button>
|
||||
<button style={{ background: genderColors.m, color: "black" }} className="btn btn-lg ml-3" onClick={() => check("masc")}>Masculine</button>
|
||||
</div>
|
||||
</div>
|
||||
}
|
||||
|
|
@ -141,7 +146,6 @@ export default function GenderGame({level, id, link, onStartStop }: { level: 1 |
|
|||
}
|
||||
|
||||
return <GameCore
|
||||
onStartStop={onStartStop}
|
||||
studyLink={link}
|
||||
questions={questions}
|
||||
id={id}
|
||||
|
|
|
|||
|
|
@ -28,7 +28,7 @@ const amount = 20;
|
|||
|
||||
type Question = { entry: T.DictionaryEntry, gender: T.Gender };
|
||||
|
||||
export default function UnisexNounGame({ id, link, onStartStop }: { id: string, link: string, onStartStop: (a: "start" | "stop") => void }) {
|
||||
export default function UnisexNounGame({ id, link }: { id: string, link: string }) {
|
||||
function* questions (): Generator<Current<Question>> {
|
||||
let pool = { ...types };
|
||||
for (let i = 0; i < amount; i++) {
|
||||
|
|
@ -78,14 +78,20 @@ export default function UnisexNounGame({ id, link, onStartStop }: { id: string,
|
|||
e.preventDefault();
|
||||
const given = standardizePashto(answer.trim());
|
||||
// @ts-ignore
|
||||
const correct = inflections[flipGender(question.gender)][0].some((ps: T.PsString) => (
|
||||
const correctAnswer = inflections[flipGender(question.gender)][0];
|
||||
const correct = correctAnswer.some((ps: T.PsString) => (
|
||||
(given === ps.p) || compareF(given, ps.f)
|
||||
));
|
||||
if (correct) {
|
||||
setAnswer("");
|
||||
}
|
||||
callback(!correct
|
||||
? <div>CORRECT ANSWER HERE</div>
|
||||
? <div>
|
||||
{correctAnswer.length > 1 && <div className="text-muted">One of the following:</div>}
|
||||
{correctAnswer.map((ps) => (
|
||||
<Examples opts={opts}>{ps}</Examples>
|
||||
))}
|
||||
</div>
|
||||
: true);
|
||||
}
|
||||
|
||||
|
|
@ -127,7 +133,6 @@ export default function UnisexNounGame({ id, link, onStartStop }: { id: string,
|
|||
}
|
||||
|
||||
return <GameCore
|
||||
onStartStop={onStartStop}
|
||||
studyLink={link}
|
||||
questions={questions}
|
||||
id={id}
|
||||
|
|
|
|||
|
|
@ -19,5 +19,5 @@ type GameRecord = {
|
|||
title: string,
|
||||
id: string,
|
||||
studyLink: string,
|
||||
Game: (onStartStop: (a: "start" | "stop") => void) => JSX.Element,
|
||||
Game: () => JSX.Element,
|
||||
};
|
||||
|
|
|
|||
15
yarn.lock
15
yarn.lock
|
|
@ -10252,12 +10252,10 @@ react-bootstrap@^1.6.4:
|
|||
uncontrollable "^7.2.1"
|
||||
warning "^4.0.3"
|
||||
|
||||
react-countdown-circle-timer@^2.5.4:
|
||||
version "2.5.4"
|
||||
resolved "https://registry.yarnpkg.com/react-countdown-circle-timer/-/react-countdown-circle-timer-2.5.4.tgz#95cb58e5e734deffd9087a13279d8924463cc239"
|
||||
integrity sha512-nKGlpS6UzfWI+k66ZVYAjcZZbZeCJuB1Xkcdci+6De1KghHfs5IwjMCdAAcZP1n1m3+tyuhLF+GVB8FRmh27RQ==
|
||||
dependencies:
|
||||
use-elapsed-time "2.1.8"
|
||||
react-countdown-circle-timer@^3.0.9:
|
||||
version "3.0.9"
|
||||
resolved "https://registry.yarnpkg.com/react-countdown-circle-timer/-/react-countdown-circle-timer-3.0.9.tgz#9bdf127c63f9c67dc12bc83cb8029765512b1f5f"
|
||||
integrity sha512-2rE2NklqgtArbvM9RVR3NctiKQ8+lY8PEjUZ2S1pKowD8CmaXUGqIaCbFBcygYH2aZQs9qPIQA49Z+9Jc2TOiQ==
|
||||
|
||||
react-dev-utils@^11.0.3:
|
||||
version "11.0.4"
|
||||
|
|
@ -12759,11 +12757,6 @@ url@^0.11.0:
|
|||
punycode "1.3.2"
|
||||
querystring "0.2.0"
|
||||
|
||||
use-elapsed-time@2.1.8:
|
||||
version "2.1.8"
|
||||
resolved "https://registry.yarnpkg.com/use-elapsed-time/-/use-elapsed-time-2.1.8.tgz#3c830ae730e2bc204f2294b66be15580f0016ea5"
|
||||
integrity sha512-lNLTDffKHdHWweQNvnch9tFI2eRP3tXccSLrwE7U6xrfyWFNEgNQZWWsGhQvtwKa0kJ6L+7E5wKbi3jg86opjg==
|
||||
|
||||
use@^3.1.0:
|
||||
version "3.1.1"
|
||||
resolved "https://registry.yarnpkg.com/use/-/use-3.1.1.tgz#d50c8cac79a19fbc20f2911f56eb973f4e10070f"
|
||||
|
|
|
|||
Loading…
Reference in New Issue