Skip to content

HTML Tricks

mkraska edited this page Feb 28, 2024 · 9 revisions

Collapsible regions (e.g. for optional instructions)

<details><summary><strong>Bedienungshinweise</strong></summary>

- Objekte (de-)aktivieren: Doppelklick
- Kraft/Moment 
  - erzeugen: Name (oder Ausdruck für Wert) eintragen und grauen Pfeil auf die Skizze ziehen
  - löschen: Doppelklicken
  - Name ändern: Löschen und neu erzeugen. Sorry, etwas unbequem :(
  - Position und Richtung ändern: Rote Kontrollpunkte ziehen
- Resultierende von Streckenlasten: Mindestens ein Kontrollpunkt muss auf der Streckenlast liegen
- Reaktionskräfte: Anfangs- oder Endpunkt müssen auf dem Lagerpunkt liegen
- Reaktionsmomente: Mittelpunkt muss auf dem Lager liegen

</details>

Full HTML version (bilingual)

[[lang code="de"]]
<details><summary><strong>Bedienungshinweise</strong></summary>
<ul>
 <li>Objekte (de-)aktivieren: Doppelklick
 <li>Kraft/Moment 
 <ul>
   <li>erzeugen: Name (oder Ausdruck für Wert) eintragen und grauen Pfeil auf die Skizze ziehen
  <li>löschen: Doppelklicken
  <li>Name ändern: Löschen und neu erzeugen. Sorry, etwas unbequem :(
  <li>Position und Richtung ändern: Rote Kontrollpunkte ziehen
 </ul>
<li> Resultierende von Streckenlasten: Mindestens ein Kontrollpunkt muss auf der Streckenlast liegen
<li> Reaktionskräfte: Anfangs- oder Endpunkt müssen auf dem Lagerpunkt liegen
<li> Reaktionsmomente: Mittelpunkt muss auf dem Lager liegen
</ul>
</details>
[[/lang]]
[[lang code="other"]]
<details><summary><strong>Hints for interactive input</strong></summary>
<ul>
<li>Activate/de-activate objects: double click 
<li>Force/moment 
  <ul>
  <li>Create: Enter name (or expression indicating the value) in the text field and then drag the gray arrow onto the sketch. 
  <li>Delete: Double click on the arrow
  <li>Change name: Delete and create new with correct name. Sorry, somewhat inconvenient :(
  <li>Change position and direction: Drag red control points 
  </ul>
<li>Resultants of line loads: At least one control point is on the line load area
<li>Force reactions: Either of the two control points must be on the support point
<li>Moment reactions: Center point must coincide with the support point.
</ul>
</details>

[[/lang]]

image

image

Info-callout

<span title="You must enter a set of solutions, 
even if there is only one solution. 
Use Maxima's set notation.">ℹ️</span>

Header for question text (not a trick, just a template)

<p><strong>WM 01 T01</strong></p>

Tryout Space

In order to try code snippets in jsfiddle,

  1. copy the code from the wiki page to the clipboard
  2. follow the link for the JSXGraph version you want to try
  3. Replace the code in the HTML section (contents of <p hidden id="init">) with the content of the clipboard
Clone this wiki locally