add verb switches analogy

This commit is contained in:
adueck 2023-07-10 14:40:13 +04:00
parent 5acd36fae3
commit a3cefdb627
4 changed files with 142 additions and 48 deletions

View File

@ -0,0 +1,78 @@
import { useState } from "react";
import { tenseData } from "./tense-data";
function SwitchPlayground() {
const [state, setState] = useState<[boolean, boolean, boolean]>([false, false, false]);
const makeToggle = (i: 0|1|2) => () => setState(os => {
const ns = [...os] as [boolean, boolean, boolean];
ns[i] = !ns[i];
return ns;
});
const [form] = tenseData.find(([t, ...switches]) => {
return JSON.stringify(state) === JSON.stringify(switches);
}) as ["string"];
return <div className="text-center mb-4">
<div className="row text-center mb-3" style={{ maxWidth: "600px", margin: "0 auto"}}>
<div className="col">
<Switch
state={state[0]}
toggle={makeToggle(0)}
label={["no ba", "with ba"]}
/>
</div>
<div className="col">
<Switch
state={state[1]}
toggle={makeToggle(1)}
label={["imperfective", "perfective"]}
/>
</div>
<div className="col">
<Switch
state={state[2]}
toggle={makeToggle(2)}
label={["stem", "root"]}
/>
</div>
</div>
<h5>{form}</h5>
</div>;
}
function Switch({ state, toggle, label }: { label: [string, string], state: boolean, toggle: () => void }) {
const borderRadius = "8px";
const border = "solid 2px black";
return <div>
<div>{label[0]}</div>
<div className="clickable" onClick={toggle} style={{
border,
height: "8rem",
borderRadius,
position: "relative",
}}>
<div style={{
border,
borderRadius,
height: "50%",
width: "25%",
top: "50%",
transform: "translateY(-50%) translateX(150%)",
position: "absolute",
}}>
<div
style={{
border,
borderRadius,
width: "50%",
top: state ? "75%" : "25%",
transform: "translateY(-50%) translateX(55%)",
position: "absolute",
}}
/>
</div>
</div>
<div>{label[1]}</div>
</div>
}
export default SwitchPlayground;

View File

@ -2,11 +2,18 @@
title: Verb Forms Master Chart title: Verb Forms Master Chart
--- ---
import {
defaultTextOptions as opts,
InlinePs,
} from "@lingdocs/ps-react";
import { Camera, Video } from "../../components/terms-links"; import { Camera, Video } from "../../components/terms-links";
import Link from "../../components/Link"; import Link from "../../components/Link";
import GameDisplay from "../../games/GameDisplay"; import Image from "../../components/Image";
import switches from "./switches.jpg";
import { tenseData } from "./tense-data";
import SwitchPlayground from "./SwitchPlayground";
## Basic Verb Tenses ## Basic Verb Forms
<table class="table table-bordered"> <table class="table table-bordered">
<thead> <thead>
@ -75,51 +82,50 @@ import GameDisplay from "../../games/GameDisplay";
</tbody> </tbody>
</table> </table>
<details> ### Verb formulas as three choices:
<summary>simplified</summary>
<table class="table table-bordered"> There's another way to look at the possible verb forms. Whenever we make a verb form we have three choices:
1. root (past) or stem (non-past)
2. imperfective or perfective form
3. with <InlinePs opts={opts} ps={{ p: "به", f: "ba" }} /> or without
<Image src={switches} />
We can use **any possible** combination of these 3 choices, giving us:
<p className="text-center">
<samp>2 x 2 x 2 = 8 verb forms</samp>
</p>
Here's a chart of every possible combination of these choices, giving us all the basic verb forms:
<div style={{ overflowX: "auto", marginBottom: "1em" }}>
<table class="table table-bordered table-striped" style={{ minWidth: "500px" }}>
<thead> <thead>
<tr> <tr>
<th scope="col">For each aspect</th> <th>form</th>
<th scope="col">has 'ba'</th>
<th scope="col">Imperfective / Perfective</th>
<th scope="col">Stem / Root</th>
</tr> </tr>
</thead> </thead>
<tbody> <tbody>
{tenseData.map((t) => (
<tr> <tr>
<td> <td>{t[0]}</td>
<div>Present/Subjunctive</div> <td>{t[1] ? "Y" : "N"}</td>
<div> <td>{t[2] ? "Imperfective" : "Perfective"}</td>
<samp>stem + present ending</samp> <td>{t[3] ? "Stem" : "Root"}</td>
</div>
</td>
</tr>
<tr>
<td>
<div>Future</div>
<div>
<samp>ba + above</samp>
</div>
</td>
</tr>
<tr className="table-active">
<td>
<div>Past</div>
<div>
<samp>root + past ending</samp>
</div>
</td>
</tr>
<tr className="table-active">
<td>
<div>Habitual Past</div>
<div>
<samp>ba + above</samp>
</div>
</td>
</tr> </tr>
))}
</tbody> </tbody>
</table> </table>
</details> </div>
Try the combinations yourself!
<SwitchPlayground />
## Imperative Forms ## Imperative Forms
@ -169,8 +175,8 @@ Any of the <Link to="/equatives/other-equatives/#overview-of-8-equatives">8 equa
## Ability Verb Forms ## Ability Verb Forms
Same formulas as <Link to="/verbs/master-chart/#basic-verb-tenses">basic verb tenses</Link> but with the <Link to="/verbs/ability/#making-the-ability-roots-and-stems">ability roots and stems</Link>. Same formulas as <Link to="/verbs/master-chart/#basic-verb-forms">basic verb forms</Link> but with the <Link to="/verbs/ability/#making-the-ability-roots-and-stems">ability roots and stems</Link>.
## Passive Verb Forms ## Passive Verb Forms
Same formulas as the <Link to="/verbs/master-chart/#basic-verb-tenses">basic verb tenses</Link> and <Link to="/verbs/master-chart/#perfect-verb-forms">perfect verb forms</Link>, but with the <Link to="/verbs/passive-voice/#making-passive-roots-and-stems">passive roots and stems</Link>. Same formulas as the <Link to="/verbs/master-chart/#basic-verb-forms">basic verb forms</Link> and <Link to="/verbs/master-chart/#perfect-verb-forms">perfect verb forms</Link>, but with the <Link to="/verbs/passive-voice/#making-passive-roots-and-stems">passive roots and stems</Link>.

Binary file not shown.

After

Width:  |  Height:  |  Size: 24 KiB

View File

@ -0,0 +1,10 @@
export const tenseData = [
["present", false, false, false],
["imperfective future", true, false, false],
["subjunctive", false, true, false],
["perfective future", true, true, false],
["continuous past", false, false, true],
["habitual continuous past", true, false, true],
["simple past", false, true, true],
["habitual simple past", true, true, true],
]