@lernapps/app-templates 0.0.1 → 0.1.0

package/explainer/src/prozent/grundwert.yaml

@@ -0,0 +1,115 @@
+# yaml-language-server: $schema=../../node_modules/@lernapps/app-templates/runtime/explainer/explainer.v1.schema.json
+title: Grundwert
+description: "Den Grundwert berechnen: G = W · 100 : p, mit einem Beispiel und dem Hunderterfeld."
+scope: |
+  Gesucht ist das Ganze, wenn nur ein Teil und sein Prozentsatz bekannt sind, etwa der alte Preis, wenn 30 € gespart
+  sind und das 12 % waren. Man rechnet $G = \frac{W \cdot 100}{p}$: $W$ geteilt durch $p$ ist 1 %, mal 100 das Ganze.
+  Bei einem Prozentsatz unter 100 % ist der Grundwert immer größer als der Prozentwert; kommt etwas Kleineres heraus,
+  wurde die Formel für den Prozentwert benutzt.
+blocks:
+  - type: section
+    id: warum
+    title: Warum
+    blocks:
+      - type: text
+        text: |
+          „Du sparst 30 €, das sind 12 % Rabatt“: Wie teuer war die Sache vorher? Hier ist das Ganze unbekannt, und
+          genau das verwirrt viele. Wer den Grundwert sicher zurückrechnen kann, löst auch die kniffligen Aufgaben, bei
+          denen nur der Teil bekannt ist.
+  - type: section
+    id: regel
+    title: Regel
+    blocks:
+      - type: formula
+        formula: 'G = \frac{W \cdot 100}{p}'
+      - type: definition
+        term: Grundwert
+        explanation: Der Grundwert $G$ ist das Ganze, also 100 %.
+      - type: text
+        text: |
+          Du kennst den **Prozentwert** $W$ (den Teil) und den **Prozentsatz** $p\,\%$. Über 1 % kommst du zum
+          Ganzen: $W$ geteilt durch $p$ ist 1 %, mal 100 ist das Ganze.
+      - type: labelled-figure
+        image: images/hunderterfeld-klammern.svg
+        alt: Ein Hunderterfeld mit 10 mal 10 Kästchen, die linken drei Spalten sind gefärbt. A die Klammer unter dem ganzen Feld, B die Klammer über den gefärbten Spalten.
+        caption: Die Klammer um das ganze Feld und die Klammer um den gefärbten Teil.
+        source: eigene Zeichnung
+        licence: CC0-1.0
+        labels:
+          - { marker: A, x: 50, y: 94, text: "Grundwert: das Ganze, 100 %" }
+          - { marker: B, x: 21, y: 5, text: "Prozentwert: der gefärbte Teil" }
+      - type: note
+        title: Achtung
+        blocks:
+          - type: text
+            text: |
+              Der Grundwert ist bei $p$ unter 100 % immer größer als der Prozentwert. Kommt etwas Kleineres heraus,
+              hast du die Formel für den Prozentwert benutzt.
+  - type: section
+    id: beispiel
+    title: Beispiel
+    blocks:
+      - type: example
+        title: Der Preis eines Rollers
+        blocks:
+          - type: text
+            text: Beim Kauf eines Rollers sparst du 30 €. Das sind 12 % Rabatt. Wie viel hat der Roller vorher gekostet?
+          - type: table
+            caption: Der Grundwert beim Roller
+            rowHeaders: true
+            rows:
+              - [Prozentwert $W$, "30 € (der Teil, der bekannt ist)"]
+              - [Prozentsatz $p$, 12 %]
+              - [Rechnung, '$G = 30 \cdot 100 : 12 = 250$']
+              - [Grundwert $G$, "**250 €** war der alte Preis"]
+          - type: figure
+            draw: { kind: hundred-grid, filled: 12 }
+            alt: Ein Hunderterfeld mit 100 Kästchen, 12 davon sind gefärbt.
+            caption: Die 12 gefärbten Kästchen sind der bekannte Teil, 30 €. Alle 100 Kästchen stehen für den Grundwert, 250 €.
+          - type: text
+            text: "Über 1 %: 30 € : 12 = 2,50 € sind 1 %. Dann 2,50 € · 100 = 250 €."
+  - type: section
+    id: uebung
+    title: Übung
+    blocks:
+      - type: matching
+        id: klammern
+        text: Beschrifte A und B. Welcher Begriff gehört zu welcher Klammer?
+        material:
+          - type: labelled-figure
+            image: images/hunderterfeld-klammern.svg
+            alt: Ein Hunderterfeld mit 10 mal 10 Kästchen, die linken drei Spalten sind gefärbt. A die Klammer unter dem ganzen Feld, B die Klammer über den gefärbten Spalten.
+            source: eigene Zeichnung
+            licence: CC0-1.0
+            legend: false
+            labels:
+              - { marker: A, x: 50, y: 94, text: Grundwert }
+              - { marker: B, x: 21, y: 5, text: Prozentwert }
+        pairsFrom: material
+        distractors: [Prozentsatz]
+        explanation: Die Klammer um das ganze Feld zeigt das Ganze, den Grundwert. Die Klammer um die gefärbten Spalten zeigt den Teil, den Prozentwert.
+        examples:
+          accepted: [[[A, Grundwert], [B, Prozentwert]]]
+          rejected: [[[0, 1], [1, 0]], [[A, Prozentsatz], [B, Prozentwert]]]
+        links:
+          - title: Prozentrechnung (Wikipedia)
+            url: https://de.wikipedia.org/wiki/Prozentrechnung
+      - type: generated
+        id: grundwert-ueben
+        given:
+          W: { int: [5, 150] }
+          p: { oneOf: [5, 10, 12, 15, 20, 25, 30, 40, 50] }
+        where: ["decimals(W * 100 / p) == 0", "W * 100 / p >= 50", "W * 100 / p <= 500"]
+        task:
+          text: "Beim Kauf eines Rollers sparst du {{W}} €. Das sind {{p}} % Rabatt. Wie viel hat der Roller vorher gekostet?"
+        answer: { value: "W * 100 / p", compare: { number: { format: money } } }
+        mistakes:
+          - {
+              value: "W * p / 100",
+              message: "Du hast {{p}} % von {{W}} € berechnet. Gesucht ist aber das Ganze, von dem die {{W}} € ein Teil sind.",
+            }
+          - { value: "W / p", message: "Das ist erst 1 %. Nimm es noch mal 100, dann hast du das Ganze." }
+        hint: "Gesucht ist das Ganze, 100 %. Rechne erst aus, was 1 % ist: {{W}} € geteilt durch {{p}}. Dann mal 100."
+        steps:
+          - '$G = \frac{W \cdot 100}{p}$'
+          - '$G = \frac{{{W}} \cdot 100}{{{p}}} = {{answer}}$, also {{answer}} €.'

package/explainer/src/prozent/prozentsatz.yaml

@@ -0,0 +1,99 @@
+# yaml-language-server: $schema=../../node_modules/@lernapps/app-templates/runtime/explainer/explainer.v1.schema.json
+title: Prozentsatz
+description: "Den Prozentsatz berechnen: p = W : G · 100, mit einem Beispiel und dem Prozentstreifen."
+scope: |
+  Gesucht ist, welcher Anteil der Teil vom Ganzen ist, etwa „18 von 24 Schülern“. Man rechnet
+  $p = \frac{W}{G} \cdot 100$: Teil durch Ganzes gibt den Anteil, mal 100 die Prozent. Erst der Prozentsatz macht
+  Anteile vergleichbar, auch wenn das Ganze verschieden groß ist. Wer unsicher ist, welche Formel passt, fragt sich,
+  welche zwei der drei Größen in der Aufgabe stehen.
+blocks:
+  - type: section
+    id: warum
+    title: Warum
+    blocks:
+      - type: text
+        text: |
+          „18 von 24 Schülern haben ein Haustier“: Ist das viel? Erst der Prozentsatz macht solche Angaben
+          vergleichbar. 75 % sagen sofort, wie groß der Anteil ist, egal ob die Klasse 24 oder 30 Schüler hat.
+  - type: section
+    id: regel
+    title: Regel
+    blocks:
+      - type: formula
+        formula: 'p = \frac{W}{G} \cdot 100'
+      - type: definition
+        term: Prozentsatz
+        explanation: |
+          Der Prozentsatz $p\,\%$ ist der Anteil des Prozentwerts $W$ (der Teil) am Grundwert $G$ (das Ganze), in
+          Hundertsteln geschrieben.
+      - type: note
+        title: Merkhilfe
+        blocks:
+          - type: text
+            text: Teil durch Ganzes, also immer durch das Ganze teilen, nie umgekehrt. Dann mal 100.
+  - type: section
+    id: beispiel
+    title: Beispiel
+    blocks:
+      - type: example
+        title: Haustiere in der Klasse
+        blocks:
+          - type: text
+            text: In einer Klasse sind 24 Schüler. 18 davon haben ein Haustier. Wie viel Prozent der Klasse sind das?
+          - type: table
+            caption: Der Prozentsatz der Klasse
+            rowHeaders: true
+            rows:
+              - [Grundwert $G$, 24 Schüler (die ganze Klasse)]
+              - [Prozentwert $W$, 18 Schüler (der Teil)]
+              - [Rechnung, '$p = 18 : 24 \cdot 100 = 0{,}75 \cdot 100 = 75$']
+              - [Prozentsatz, "**75 %**"]
+          - type: figure
+            draw: { kind: bar, part: 18, whole: 24 }
+            alt: Ein Streifen für 24 Schüler, drei Viertel davon sind gefärbt, 75 %.
+            caption: Der ganze Streifen ist der Grundwert, 24 Schüler sind 100 %. Der gefärbte Teil ist der Prozentwert, 18 Schüler sind 75 %.
+          - type: text
+            text: "Probe: 75 % von 24 sind 24 · 0,75 = 18. Passt."
+  - type: section
+    id: uebung
+    title: Übung
+    blocks:
+      - type: single-choice
+        id: welche-rechnung
+        text: In einer Klasse mit 25 Schülern haben 10 ein Haustier. Mit welcher Rechnung bekommst du den Prozentsatz?
+        explanation: "Der Prozentsatz ist Teil durch Ganzes, mal 100. Der Teil sind die 10 Schüler mit Haustier, das Ganze die 25 Schüler der Klasse, also 10 : 25 · 100 = 40 %."
+        links:
+          - title: Prozentrechnung mittels Formeln (Serlo)
+            url: https://de.serlo.org/mathe/2193/prozentrechnung-mittels-formeln
+        options:
+          - text: "10 : 25 · 100"
+            correct: true
+            info: Teil durch Ganzes, dann mal 100. So kommt der Anteil in Hundertsteln heraus.
+          - text: "25 : 10 · 100"
+            correct: false
+            info: Hier wird das Ganze durch den Teil geteilt. Das ergibt 250 %, mehr als die ganze Klasse.
+          - text: "10 · 25 : 100"
+            correct: false
+            info: So rechnest du einen Prozentwert aus, nicht einen Prozentsatz. Es kommen 2,5 heraus.
+      - type: generated
+        id: prozentsatz-ueben
+        given:
+          G: { int: [16, 32] }
+          W: { int: [1, 31] }
+        where: ["W < G", "decimals(W * 100 / G) == 0"]
+        task:
+          text: "In einer Klasse sind {{G}} Schüler. {{W}} davon haben ein Haustier. Wie viel Prozent der Klasse sind das?"
+        answer: { value: "W * 100 / G", compare: { number: { format: percent, decimals: 0 } } }
+        mistakes:
+          - {
+              value: "W / G",
+              message: "Das ist der Anteil als Dezimalzahl. Nimm ihn noch mal 100, dann hast du den Prozentsatz.",
+            }
+          - {
+              value: "G * 100 / W",
+              message: "Du hast das Ganze durch den Teil geteilt. Richtig ist: Teil durch Ganzes, also W durch G.",
+            }
+        hint: "Teile den Teil ({{W}} Schüler) durch das Ganze ({{G}} Schüler) und nimm das Ergebnis mal 100."
+        steps:
+          - '$p = \frac{W}{G} \cdot 100$'
+          - '$p = \frac{{{W}}}{{{G}}} \cdot 100 = {{answer}}$, also {{answer}} %.'

package/explainer/src/prozent/prozentwert.yaml

@@ -0,0 +1,119 @@
+# yaml-language-server: $schema=../../node_modules/@lernapps/app-templates/runtime/explainer/explainer.v1.schema.json
+title: Prozentwert
+description: "Den Prozentwert berechnen: W = G · p : 100, mit einem Beispiel und dem Hunderterfeld."
+scope: |
+  Gesucht ist der Teil des Ganzen, etwa wie viel Euro man bei 20 % Rabatt auf 80 € spart. Man rechnet
+  $W = \frac{G \cdot p}{100}$: erst 1 % des Grundwerts ($G$ geteilt durch 100), dann mal $p$. Der Prozentwert hat die
+  Einheit des Grundwerts (€, Schüler, mAh). Ein Hunderterfeld zeigt, dass $p\,\%$ von 100 Kästchen $p$ Kästchen sind,
+  bei einem Feld mit anderer Größe aber nicht. Weil man beim Malnehmen die Zahlen tauschen darf, ist zum Beispiel 20 %
+  von 50 € dasselbe wie 50 % von 20 €, nämlich 10 €. Ein häufiger Fehler ist, das Teilen durch 100 zu vergessen; ein
+  anderer, den neuen Preis statt des Rabatts auszurechnen.
+blocks:
+  - type: section
+    id: warum
+    title: Warum
+    blocks:
+      - type: text
+        text: |
+          „20 % Rabatt auf 80 €“: Wie viel sparst du wirklich? Der Prozentwert ist der Teil des Ganzen, den die
+          Prozente beschreiben. Wer ihn schnell ausrechnen kann, weiß beim Einkaufen, beim Handy-Akku und in jeder
+          Statistik sofort, worum es geht.
+  - type: section
+    id: regel
+    title: Regel
+    blocks:
+      - type: formula
+        formula: 'W = \frac{G \cdot p}{100}'
+      - type: definition
+        term: Prozentwert
+        explanation: |
+          Der Prozentwert $W$ ist der Anteil am Ganzen, in der Einheit des Grundwerts (€, Schüler, mAh …).
+      - type: text
+        text: |
+          Der **Grundwert** $G$ ist das Ganze, also 100 %. Der **Prozentsatz** $p\,\%$ sagt, welcher Anteil gemeint
+          ist. mAh (Milliamperestunden) gibt an, wie viel Ladung ein Akku speichert.
+      - type: note
+        title: Merkhilfe
+        blocks:
+          - type: text
+            text: Erst 1 % ausrechnen ($G$ geteilt durch 100), dann mal $p$ nehmen.
+  - type: section
+    id: beispiel
+    title: Beispiel
+    blocks:
+      - type: example
+        title: Rabatt auf ein Skateboard
+        blocks:
+          - type: text
+            text: Ein Skateboard kostet 250 €. Es gibt 12 % Rabatt. Wie viel Euro sparst du?
+          - type: table
+            caption: Der Prozentwert beim Skateboard
+            rowHeaders: true
+            rows:
+              - [Grundwert $G$, 250 € (der volle Preis)]
+              - [Prozentsatz $p$, 12 %]
+              - [Rechnung, '$W = 250 \cdot 12 : 100 = 30$']
+              - [Prozentwert $W$, "**30 €** Rabatt"]
+          - type: figure
+            draw: { kind: hundred-grid, filled: 12 }
+            alt: Ein Hunderterfeld mit 100 Kästchen, 12 davon sind gefärbt.
+            caption: Das Hunderterfeld ist der Grundwert, 100 Kästchen sind 100 %. Die 12 gefärbten Kästchen sind der Prozentwert.
+          - type: text
+            text: "Über 1 %: 250 € : 100 = 2,50 € sind 1 %. Dann 2,50 € · 12 = 30 €."
+  - type: section
+    id: uebung
+    title: Übung
+    blocks:
+      - type: generated
+        id: prozentwert-ueben
+        given:
+          G: { int: [150, 1500], step: 5 }
+          p: { oneOf: [5, 10, 12, 15, 20, 25, 30, 40] }
+        where: ["decimals(G * p / 100) <= 2"]
+        task:
+          text: "Ein Fahrrad kostet {{G}} €. Im Angebot gibt es {{p}} % Rabatt. Wie viel Euro sparst du?"
+        answer: { value: "G * p / 100", compare: { number: { format: money } } }
+        mistakes:
+          - { value: "G * p", message: "Du hast vergessen, durch 100 zu teilen: {{p}} % sind {{p}} Hundertstel." }
+          - {
+              value: "G - G * p / 100",
+              message: "Das ist der neue Preis, nicht der Rabatt. Gefragt ist, wie viel du sparst.",
+            }
+        hint: "Rechne erst 1 % aus: {{G}} € geteilt durch 100. Dann nimm das mal {{p}}."
+        steps:
+          - '$W = \frac{G \cdot p}{100}$'
+          - '$W = \frac{{{G}} \cdot {{p}}}{100} = {{answer}}$, also {{answer}} € Rabatt.'
+      - type: vue-component
+        id: prozentfeld
+        component: ProzentFeld
+        props:
+          task: "Das Feld hat {G} Kästchen, zusammen sind sie 100 %. Färbe {p} % davon."
+          counter: "{n} von {G} Kästchen gefärbt"
+          cell: "Kästchen {n}"
+          mistakes:
+            - "Du hast {p} Kästchen gefärbt. Das wären {p} %, wenn das Feld 100 Kästchen hätte. Hier sind {G} Kästchen 100 %."
+            - "Du hast den Rest gefärbt. Die gefärbten Kästchen sollen die {p} % sein, nicht das, was übrig bleibt."
+        examples:
+          accepted:
+            - { answer: 2, seed: 1 }
+          rejected:
+            - { answer: 5, seed: 1 }
+            - { answer: 38, seed: 1 }
+            - { answer: 0 }
+      - type: open-task
+        id: tauschen-erklaeren
+        task: Erkläre in zwei bis vier Sätzen, warum 20 % von 50 € genauso viel sind wie 50 % von 20 €.
+        points:
+          - text: Der Prozentwert ist Grundwert mal Prozentsatz, geteilt durch 100.
+            source: /prozent/prozentwert/#regel
+          - text: "Beide Male kommt 20 · 50 : 100 = 10 heraus, also 10 €."
+            source: /prozent/prozentwert/#regel
+          - text: Beim Malnehmen darf man die Zahlen tauschen, darum ist das Ergebnis gleich.
+            source: /prozent/prozentwert/#regel
+          - text: Ganze Sätze mit einer Begründung (weil …, darum …).
+            kind: form
+        solution: |
+          Den Prozentwert rechnet man mit $W = \frac{G \cdot p}{100}$. Für 20 % von 50 € ist das
+          $\frac{50 \cdot 20}{100} = 10$, für 50 % von 20 € ist es $\frac{20 \cdot 50}{100} = 10$. Weil man beim
+          Malnehmen die Zahlen tauschen darf, kommt beide Male 10 € heraus.
+        hint: Setz beide Male in die Formel ein und vergleich, was im Zähler steht.

package/explainer/tsconfig.json

@@ -0,0 +1 @@
+{ "extends": "@lernapps/tooling/tsconfig.json", "include": ["src"] }

package/explainer/vite.config.ts

@@ -0,0 +1,4 @@
+import { lernapps } from "@lernapps/tooling/preset";
+import { explainer } from "@lernapps/app-templates/explainer/plugin";
+
+export default lernapps({ plugins: [explainer()] });

package/interactive/.arc42ignore

@@ -0,0 +1,5 @@
+# Paths the architecture does not claim (arc42 H021), relative to this template folder.
+# The entry, which hands the app's core and root component to the shell (if-start), and type declarations for Vite
+# and Vue single-file components: configuration rather than architecture.
+src/main.ts
+src/env.d.ts

package/interactive/README.md

@@ -0,0 +1,28 @@
+# Archetype interactive
+
+One app page where the learner's doing is the content: a game, a trainer, a simulation. A static start page says what
+it is and works without JavaScript.
+
+## What it can do
+
+- Any interaction in one page: keys, buttons, touch.
+- Timers and moving parts: the runtime's clock ticks the app's core.
+- Its own look and colours, images, and libraries with an open licence, bundled.
+- Routes for modes or levels, which a link can open.
+- The learning state on the learner's device, at most 100 kB.
+- German, plus English: texts in message files.
+- Playthroughs prove its behaviour: the build plays them against the core, the browser on desktop and at 360 px.
+
+## What it cannot do yet
+
+- No full-screen app page: the runtime always shows its frame; an overlay inside it works.
+- No storage beyond 100 kB.
+- No property tests of the core over fixed seeds.
+- A time limit or a required keyboard deviates from accessibility or from 360 px: the catalog entry says so.
+
+## What the app supplies
+
+- `src/app.yaml` ([schema](../runtime/interactive/interactive.v1.schema.json)), the core
+  `src/core/index.ts`, its Vue components in `src/ui/`, data in `src/data/`, texts in `src/messages/`, playthroughs in
+  `src/playthroughs/` ([schema](../runtime/interactive/playthrough.v1.schema.json)), and its part of the
+  architecture in `docs/arc42/`.

package/interactive/_gitignore

@@ -0,0 +1,4 @@
+node_modules/
+dist/
+test-results/
+playwright-report/