diff options
| -rw-r--r-- | Info/6/2/punktnotation_bingo/punktnotation_bingo.html | 154 | ||||
| -rw-r--r-- | Info/6/2/punktnotation_bingo/slides.md | 34 |
2 files changed, 188 insertions, 0 deletions
diff --git a/Info/6/2/punktnotation_bingo/punktnotation_bingo.html b/Info/6/2/punktnotation_bingo/punktnotation_bingo.html new file mode 100644 index 00000000..f2f883f2 --- /dev/null +++ b/Info/6/2/punktnotation_bingo/punktnotation_bingo.html @@ -0,0 +1,154 @@ +<!DOCTYPE html> +<html> +<head> + <title>Punktnotations Bingo</title> + <meta charset="utf8"> + <meta name="viewport" content="width=device-width, initial-scale=1.0"> + <meta name="author" content="Florian Fischer"> + + <style> + :root { + /* define applied colors */ + --bg: #fdfdfd; + --fg: #1a1a1a; + } + @media (prefers-color-scheme: dark) { + /* change apllied colors to the dark gruvbox pallet + * https://github.com/morhetz/gruvbox + */ + :root { + --bg: #282828; /* dark bg */ + --fg: #ebdbb2; /* dark fg */ + } + } + + html { + line-height: 1.5; + font-family: Georgia, serif; + font-size: 20px; + color: var(--fg); + background-color: var(--bg); + } + + table, td { + border: 1px solid; + } + + td { + height: 50px; + padding: 5px; + } + + body { + margin: 0 auto; + max-width: 46em; + padding-left: 50px; + padding-right: 50px; + padding-top: 50px; + padding-bottom: 50px; + hyphens: auto; + word-wrap: break-word; + text-rendering: optimizeLegibility; + font-kerning: normal; + } + + footer { + position:absolute; + bottom: 0; + } + + @media (max-width: 600px) { + body { + font-size: 0.9em; + padding: 1em; + } + } + </style> + + <script language="javascript" type="text/javascript"> + /* + @licstart The following is the entire license notice for the + JavaScript code in this page. + + Copyright (C) 2024 Florian Fischer + + The JavaScript code in this page is free software: you can + redistribute it and/or modify it under the terms of the GNU + General Public License (GNU GPL) as published by the Free Software + Foundation, either version 3 of the License, or any later version. + The code is distributed WITHOUT ANY WARRANTY; + without even the implied warranty of MERCHANTABILITY or FITNESS + FOR A PARTICULAR PURPOSE. See the GNU GPL for more details. + + As additional permission under GNU GPL version 3 section 7, you + may distribute non-source (e.g., minimized or compacted) forms of + that code without the copy of the GNU GPL normally required by + section 4, provided you include this license notice and a URL + through which recipients can access the Corresponding Source. + + @licend The above is the entire license notice + for the JavaScript code in this page. + */ + + const fields = [ + "SternA.Transparenz = 75%", + "SternB.Linienart = gestrichelt", + "SternC.Musterfüllung = gestreift", + "SternD.Linienart = gepunktet", + "SternE.Füllfarbe = blau", + "SternF.Linienfarbe = grün", + "SternG.Linienfarbe = rot", + "SternH.Füllfarbe = gelb", + "SternI.Musterfüllung = kariert", + ] + + /* Randomize array in-place using Durstenfeld shuffle algorithm + * See: https://stackoverflow.com/questions/2450954/how-to-randomize-shuffle-a-javascript-array + */ + function shuffle(array) { + for (var i = array.length - 1; i >= 0; i--) { + var j = Math.floor(Math.random() * (i + 1)); + var temp = array[i]; + array[i] = array[j]; + array[j] = temp; + } + } + + document.addEventListener('DOMContentLoaded', function() { + shuffle(fields); + + let table = document.createElement("TABLE"); + + for (var i = 0; i < 3; i++) { + let row = table.insertRow(i); + for (var j = 0; j < 3; j++) { + let cell = row.insertCell(j); + cell.onclick = function() { + if (cell.style.background === "darkgoldenrod") { + cell.style.background = ""; + } else { + cell.style.background = "darkgoldenrod"; + } + } + cell.innerHTML = fields[(i*3)+j]; + } + } + + document.getElementById("sheet").appendChild(table); + }); + </script> +</head> +<body> +<h1>Punktnotations Bingo</h1> +<h2>Regeln</h2> +<ul> +<li>Wird ein Objekt angezeigt, das sich mit einer der Punktnotationen beschreiben lässt, darfst du diese Punktnotation anklicken.</li> +<li>Wer zuerst drei richtig erkannte Punktnotationen in einer Reihe, egal ob waagrecht, senkrecht oder diagonal hat, ist Bingokönig oder Bingokönigin.</li> +</ul> +<div id="sheet"> +</div> +<footer> +<p xmlns:cc="http://creativecommons.org/ns#">Diese Seite von <span property="cc:attributionName">Florian Fischer und Anja Eckstein</span> ist unter folgender Lizenz veröffentlicht: <a href="https://creativecommons.org/licenses/by-sa/4.0/?ref=chooser-v1" target="_blank" rel="license noopener noreferrer" style="display:inline-block;">CC BY-SA 4.0<img style="height:22px!important;margin-left:3px;vertical-align:text-bottom;" src="https://mirrors.creativecommons.org/presskit/icons/cc.svg?ref=chooser-v1" alt=""><img style="height:22px!important;margin-left:3px;vertical-align:text-bottom;" src="https://mirrors.creativecommons.org/presskit/icons/by.svg?ref=chooser-v1" alt=""><img style="height:22px!important;margin-left:3px;vertical-align:text-bottom;" src="https://mirrors.creativecommons.org/presskit/icons/sa.svg?ref=chooser-v1" alt=""></a></p> +</footer> +</body> +</html> diff --git a/Info/6/2/punktnotation_bingo/slides.md b/Info/6/2/punktnotation_bingo/slides.md new file mode 100644 index 00000000..598f71df --- /dev/null +++ b/Info/6/2/punktnotation_bingo/slides.md @@ -0,0 +1,34 @@ +--- +author: Florian Fischer +theme: metropolis +aspectratio: 169 +header-includes: | + \makeatletter + \beamer@ignorenonframefalse + \makeatother + \usetikzlibrary{shapes.geometric} + \usetikzlibrary{patterns} + \let\tightlist\relax +--- + + +## Bingo Time! + +* Öffne die Webseite [https://schule.muhq.space/bingo.html](https://schule.muhq.space/bingo.html). +* Wenn du ein Objekt siehst, das sich mit einer der Punktnotationen auf deinem Bingo-Feld beschreiben lässt, darfst du es anklicken. +* Wer zuerst eine Reihe (waagerecht, senkrecht, oder diagonal) voll hat ist Bingo-König oder Königin. + +## + +\begin{center} +\begin{tikzpicture}[ss/.style={star, draw, star point ratio=2.5, minimum size=6cm, line width=2pt}] + \only<1>{ \node[ss, fill=yellow] {}; } + \only<2>{ \node[ss, dotted, fill=green!80] {}; } + \only<3>{ \node[ss, dashed, fill=green!80] {}; } + \only<4>{ \node[ss, draw=red, densely dash dot dot, fill=yellow] {}; } + \only<5>{ \node[ss, draw=red, preaction={fill,green!80}, pattern={grid}, pattern color=green!70!black] {}; } + \only<6>{ \node[ss, draw=red, preaction={fill, yellow}, pattern={north east lines}, pattern color=red] {}; } + \only<7>{ \node[ss, fill=blue!80] {}; } + \only<8>{ \node[ss, fill=blue!80, opacity=0.75] {}; } +\end{tikzpicture} +\end{center} |