Vorlage:3Spalten und Benutzer:Maria Eirich/Test 1: Unterschied zwischen den Seiten

Aus ZUM-Unterrichten
(Unterschied zwischen Seiten)
KKeine Bearbeitungszusammenfassung
 
Keine Bearbeitungszusammenfassung
Markierung: 2017-Quelltext-Bearbeitung
 
Zeile 1: Zeile 1:
<includeonly>{{#ifeq: true | {{{skipgrid|}}}
{{Special:PrefixIndex/UserWiki:Maria Eirich/}}
| <!-- nothing -->
| <div class="grid uk-grid">
}}{{#if: {{{3|}}}
| <!-- nothing -->
| <div class="width-1-6 uk-width-1-6"></div>
}}<div class="width-1-3 uk-width-1-3">{{{1| }}}</div
><div class="width-1-3 uk-width-1-3">{{{2| }}}</div
>{{#if: {{{3|}}}
| <div class="width-1-3 uk-width-1-3">{{{3}}}</div>
| <div class="width-1-6 uk-width-1-6"></div>
}}{{#ifeq: true | {{{skipgrid}}}
| <!-- nothing -->
| </div>
}}</includeonly><noinclude>


Die Vorlage erlaubt es 3 Spalten zu erzeugen.


== So sieht's aus:  ==
== Lösungen verstecken==
Die Hintergrundfarben dienen nur der Veranschaulichung.
*[[Aristoteles]]
{{Vorlage:3Spalten
*Quellcode
|{{Box-spezial | Titel = Spalte 1 | Inhalt = |Rahmen = 0| Hintergrund = {{Farbe | primär | 1}} }}
{|
|{{Box-spezial | Titel = Spalte 2 | Inhalt = |Rahmen = 0| Hintergrund = {{Farbe | sekundär-links | 1}}}}
|width=500px; valign="top" |
|{{Box-spezial | Titel = Spalte 3 | Inhalt = |Rahmen = 0| Hintergrund = {{Farbe | sekundär-rechts | 1}}}}
<div class="mw-collapsible mw-collapsed" data-expandtext="Lösung anzeigen" data-collapsetext="Lösung verbergen"></div>
}}


== Syntax ==
|width=5px|
  <nowiki>{{3Spalten|
|valign="top" |
  Spalte 1
<pre><div class="mw-collapsible mw-collapsed" data-expandtext="Lösung anzeigen" data-collapsetext="Lösung verbergen"></div></pre>
  |
|}
  Spalte 2
  |
  Spalte 3
  }} 
</nowiki>
Für spezielle Anforderungen gibt es noch 2 weitere Features:
=== Parameter: skipgrid ===
;erlaubte Werte;: true, false


Ein zusätzlicher Parameter skipgrid um zu verhindern dass das container element für die 3 Spalten erzeugt wird. Das ist hilfreich, wenn man in einem größeren CSS-Grid arbeitet und nicht immer wieder neue grids aufmachen will.
  <nowiki>{{3Spalten|
  Spalte 1
  |
  Spalte 2
  |
  Spalte 3
  |skipgrid = true
  }} 
</nowiki>


=== 2 Spaltig ===
*Lösung verstecken + Quizz


Sollte die Vorlage mit Inhalten für nur 2 Spalten eingebunden sein, so werden die Spalten zentriert. Der Platz der  fehlende Spalte wird links und rechts hinzugefügt.
<div class="mw-collapsible mw-collapsed" data-expandtext="Quizz anzeigen" data-collapsetext="Quizz verbergen">
<div class="grid">
<div class="width-1-2">
<div class="lueckentext-quiz">
'''IV''' < '''VI''' < '''IX''' < '''XIV''' < '''XVII''' < '''XIX''' < '''XXI'''
</div>
</div>
<div class="width-1-2">
<div class="lueckentext-quiz">
'''III''' < '''VIII''' < '''IX'''< '''XI''' < '''XIII''' < '''XXII''' < '''XXIV'''
</div>
</div>
</div>
</div>
<pre>
<div class="mw-collapsible mw-collapsed" data-expandtext="Quizz anzeigen" data-collapsetext="Quizz verbergen">
<div class="grid">
<div class="width-1-2">
<div class="lueckentext-quiz">
'''IV''' < '''VI''' < '''IX''' < '''XIV''' < '''XVII''' < '''XIX''' < '''XXI'''
</div>
</div>
<div class="width-1-2">
<div class="lueckentext-quiz">
'''III''' < '''VIII''' < '''IX'''< '''XI''' < '''XIII''' < '''XXII''' < '''XXIV'''
</div>
</div>
</div>
</div>
</pre>
==h5p==
<iframe src="https://h5p.org/h5p/embed/707" width="100%" height="232" frameborder="0" allowfullscreen="allowfullscreen"></iframe>


  <nowiki>{{3Spalten|
  Spalte 1
  |
  Spalte 2
  }} 
</nowiki>
{{3Spalten
|{{Box-spezial | Titel = Spalte 1 | Inhalt = |Rahmen = 0| Hintergrund = {{Farbe | primär}} }}
|{{Box-spezial | Titel = Spalte 2 | Inhalt = |Rahmen = 0| Hintergrund = {{Farbe | sekundär-links}}}}
}} 


[[Kategorie:Vorlage:Kastendesign-Bausteine]]
== Zuordnungsquiz ==
</noinclude>
 
<div class="zuordnungs-quiz">
 
{|
| Adjektive || schön || klein|| gelb
|-
| Verben || gehen || schwimmen|| lachen
|-
| Nomen || Haus || Glück || Sonne
|}
 
</div>
 
== Tabellen in R-Quizzes==
Ersetzt man die Tabellenstruktur in den R-Quizzen durch die intelligenten Spalten für schmale Displays hat es den Nachteil für das '''Betrachten mit dem Handy '''dass die Lücken auf dem Handy nicht mehr direkt unter dem Graphen stehen.
Daher würde ich hier die alte Tabellenstruktur belassen? Bitte die folgenden zwei Beispiele auf dem Handy testen!
 
[[Benutzer:Maria Eirich|Maria Eirich]] ([[Benutzer Diskussion:Maria Eirich|Diskussion]]) 18:47, 9. Jun. 2018 (CEST)
 
 
<big>'''Mit Tabellenstruktur aus altem Wiki''' </big>
<div class="lueckentext-quiz" style="text-align: center;">
{|
|-
| style="padding:5px" | [[Bild:Üb3_Parabel_1.jpg]]
| style="padding:5px" | [[Bild:Üb3_Parabel_3.jpg]]
| style="padding:5px" | [[Bild:Üb3_Gerade_1.jpg]]
| style="padding:5px" | [[Bild:Üb3_Parabel_4.jpg|150px]]
| style="padding:5px" | [[Bild:Üb3_Gerade_2.jpg|150px]]
| style="padding:5px" | [[Bild:Üb3_Parabel_2.jpg|150px]]
|-
| <strong>y = x<sup>2</sup> + 3 </strong>  || <strong>y = - x<sup>2</sup> + 3 </strong> || <strong>y = - x + 3 </strong> || <strong>y = -x<sup>2</sup> - 3</strong> || <strong>y = x - 3 </strong> || <strong>y = x<sup>2</sup> - 3</strong>
|}
 
</div>
 
<pre>
<div class="lueckentext-quiz" style="text-align: center;">
{|
|-
| style="padding:5px" | [[Bild:Üb3_Parabel_1.jpg]]
| style="padding:5px" | [[Bild:Üb3_Parabel_3.jpg]]
| style="padding:5px" | [[Bild:Üb3_Gerade_1.jpg]]
| style="padding:5px" | [[Bild:Üb3_Parabel_4.jpg|150px]]
| style="padding:5px" | [[Bild:Üb3_Gerade_2.jpg|150px]]
| style="padding:5px" | [[Bild:Üb3_Parabel_2.jpg|150px]]
|-
| <strong>y = x<sup>2</sup> + 3 </strong>  || <strong>y = - x<sup>2</sup> + 3 </strong> || <strong>y = - x + 3 </strong> || <strong>y = -x<sup>2</sup> - 3</strong> || <strong>y = x - 3 </strong> || <strong>y = x<sup>2</sup> - 3</strong>
|}
 
</div>
</pre>
 
 
<big>'''Tabellenstruktur mit intelligenten Spalten '''</big>
 
<div class="lueckentext-quiz">
<div class="grid">
<div class="width-1-6">[[Bild:Üb3_Parabel_1.jpg]] </div>
<div class="width-1-6">[[Bild:Üb3_Parabel_3.jpg]] </div>
<div class="width-1-6">[[Bild:Üb3_Gerade_1.jpg]] </div>
<div class="width-1-6">[[Bild:Üb3_Parabel_4.jpg|150px]] </div>
<div class="width-1-6">[[Bild:Üb3_Gerade_2.jpg|150px]] </div>
<div class="width-1-6">[[Bild:Üb3_Parabel_2.jpg|150px]] </div>
</div>
<div class="grid">
<div class="width-1-6"> <strong>y = x<sup>2</sup> + 3 </strong> </div>
<div class="width-1-6"> <strong>y = -x<sup>2</sup> + 3 </strong> </div>
<div class="width-1-6"><strong>y = -x + 3 </strong> </div>
<div class="width-1-6"><strong>y = -x<sup>2</sup> - 3</strong> </div>
<div class="width-1-6"><strong>y = x - 3 </strong> </div>
<div class="width-1-6"><strong>y = x<sup>2</sup> - 3</strong></div>
</div>
</div>
 
<pre>
<div class="lueckentext-quiz">
<div class="grid">
<div class="width-1-6">[[Bild:Üb3_Parabel_1.jpg]] </div>
<div class="width-1-6">[[Bild:Üb3_Parabel_3.jpg]] </div>
<div class="width-1-6">[[Bild:Üb3_Gerade_1.jpg]] </div>
<div class="width-1-6">[[Bild:Üb3_Parabel_4.jpg|150px]] </div>
<div class="width-1-6">[[Bild:Üb3_Gerade_2.jpg|150px]] </div>
<div class="width-1-6">[[Bild:Üb3_Parabel_2.jpg|150px]] </div>
</div>
<div class="grid">
<div class="width-1-6"> <strong>y = x<sup>2</sup> + 3 </strong> </div>
<div class="width-1-6"> <strong>y = -x<sup>2</sup> + 3 </strong> </div>
<div class="width-1-6"><strong>y = -x + 3 </strong> </div>
<div class="width-1-6"><strong>y = -x<sup>2</sup> - 3</strong> </div>
<div class="width-1-6"><strong>y = x - 3 </strong> </div>
<div class="width-1-6"><strong>y = x<sup>2</sup> - 3</strong></div>
</div>
 
</div>
</pre>
==Learning-App und Lösung versteckt==
*Ohne Lösung versteckt
{{LearningApp|app=pi5g2shxc01|width=70%|height=400px}}
 
*mit Lösung versteckt wird das Applet nicht korrekt ausgeführt (Layout anders und die weiteren Fragen werden nicht angezeigt
{{Lösung versteckt|1=
{{LearningApp|app=pi5g2shxc01|width=70%|height=400px}}
|2=Test Anzeigen|3=Test Verbergen}}
==ggb==
<ggb_applet id="jeyzsZ8x" width="100%" height="350" border="888888" />
==ggb in Box==
{{Box|1=Teilbarkeit 2, 4, 5, 10 trainieren|2=
<ggb_applet id="jeyzsZ8x" width="100%" height="350" border="888888" />
|3=Üben}}
==ggb Rechteck==
<ggb_applet width="800" height="600" id="kzdbnmnn‎" showResetIcon="true" />

Version vom 8. Dezember 2018, 17:16 Uhr


Lösungen verstecken

 
<div class="mw-collapsible mw-collapsed" data-expandtext="Lösung anzeigen" data-collapsetext="Lösung verbergen"></div>


  • Lösung verstecken + Quizz

IV < VI < IX < XIV < XVII < XIX < XXI

III < VIII < IX< XI < XIII < XXII < XXIV 

<div class="mw-collapsible mw-collapsed" data-expandtext="Quizz anzeigen" data-collapsetext="Quizz verbergen"> 
<div class="grid">
<div class="width-1-2">
<div class="lueckentext-quiz">
'''IV''' < '''VI''' < '''IX''' < '''XIV''' < '''XVII''' < '''XIX''' < '''XXI'''
</div>
</div>
<div class="width-1-2">
<div class="lueckentext-quiz">
'''III''' < '''VIII''' < '''IX'''< '''XI''' < '''XIII''' < '''XXII''' < '''XXIV''' 
</div>
</div>
</div>
</div>

h5p


Zuordnungsquiz

Adjektive schön klein gelb
Verben gehen schwimmen lachen
Nomen Haus Glück Sonne

Tabellen in R-Quizzes

Ersetzt man die Tabellenstruktur in den R-Quizzen durch die intelligenten Spalten für schmale Displays hat es den Nachteil für das Betrachten mit dem Handy dass die Lücken auf dem Handy nicht mehr direkt unter dem Graphen stehen. Daher würde ich hier die alte Tabellenstruktur belassen? Bitte die folgenden zwei Beispiele auf dem Handy testen!

Maria Eirich (Diskussion) 18:47, 9. Jun. 2018 (CEST)


Mit Tabellenstruktur aus altem Wiki

Üb3 Parabel 1.jpg Üb3 Parabel 3.jpg Üb3 Gerade 1.jpg Üb3 Parabel 4.jpg Üb3 Gerade 2.jpg Üb3 Parabel 2.jpg
y = x2 + 3 y = - x2 + 3 y = - x + 3 y = -x2 - 3 y = x - 3 y = x2 - 3 
<div class="lueckentext-quiz" style="text-align: center;">
{| 
|- 
| style="padding:5px" | [[Bild:Üb3_Parabel_1.jpg]] 
| style="padding:5px" | [[Bild:Üb3_Parabel_3.jpg]] 
| style="padding:5px" | [[Bild:Üb3_Gerade_1.jpg]] 
| style="padding:5px" | [[Bild:Üb3_Parabel_4.jpg|150px]] 
| style="padding:5px" | [[Bild:Üb3_Gerade_2.jpg|150px]]
| style="padding:5px" | [[Bild:Üb3_Parabel_2.jpg|150px]] 
|- 
| <strong>y = x<sup>2</sup> + 3 </strong>  || <strong>y = - x<sup>2</sup> + 3 </strong> || <strong>y = - x + 3 </strong> || <strong>y = -x<sup>2</sup> - 3</strong> || <strong>y = x - 3 </strong> || <strong>y = x<sup>2</sup> - 3</strong>
|}

</div>


Tabellenstruktur mit intelligenten Spalten

Üb3 Parabel 1.jpg
Üb3 Parabel 3.jpg
Üb3 Gerade 1.jpg
Üb3 Parabel 4.jpg
Üb3 Gerade 2.jpg
Üb3 Parabel 2.jpg
y = x2 + 3
y = -x2 + 3
y = -x + 3
y = -x2 - 3
y = x - 3
y = x2 - 3
<div class="lueckentext-quiz">
<div class="grid">
 <div class="width-1-6">[[Bild:Üb3_Parabel_1.jpg]] </div>
 <div class="width-1-6">[[Bild:Üb3_Parabel_3.jpg]] </div>
<div class="width-1-6">[[Bild:Üb3_Gerade_1.jpg]] </div> 
<div class="width-1-6">[[Bild:Üb3_Parabel_4.jpg|150px]] </div> 
<div class="width-1-6">[[Bild:Üb3_Gerade_2.jpg|150px]] </div>
<div class="width-1-6">[[Bild:Üb3_Parabel_2.jpg|150px]] </div>
</div> 
<div class="grid">
<div class="width-1-6"> <strong>y = x<sup>2</sup> + 3 </strong> </div>
<div class="width-1-6"> <strong>y = -x<sup>2</sup> + 3 </strong> </div>
<div class="width-1-6"><strong>y = -x + 3 </strong> </div>
<div class="width-1-6"><strong>y = -x<sup>2</sup> - 3</strong> </div> 
<div class="width-1-6"><strong>y = x - 3 </strong> </div> 
<div class="width-1-6"><strong>y = x<sup>2</sup> - 3</strong></div>
</div> 

</div>

Learning-App und Lösung versteckt

  • Ohne Lösung versteckt


  • mit Lösung versteckt wird das Applet nicht korrekt ausgeführt (Layout anders und die weiteren Fragen werden nicht angezeigt

ggb

GeoGebra

ggb in Box

Teilbarkeit 2, 4, 5, 10 trainieren
GeoGebra

ggb Rechteck

GeoGebra
Abgerufen von „https://unterrichten.zum.de/index.php?title=Vorlage:3Spalten&oldid=80119“