https://kata.coderdojo.it/wiki/index.php?action=history&feed=atom&title=Gioco_a_bivi_javascript
Gioco a bivi javascript - Cronologia
2026-05-03T10:56:03Z
Cronologia della pagina su questo sito
MediaWiki 1.23.2
https://kata.coderdojo.it/wiki/index.php?title=Gioco_a_bivi_javascript&diff=51&oldid=prev
Leoncino il 16:21, 29 ago 2014
2014-08-29T16:21:54Z
<p></p>
<a href="https://kata.coderdojo.it/wiki/index.php?title=Gioco_a_bivi_javascript&diff=51&oldid=48">Mostra modifiche</a>
Leoncino
https://kata.coderdojo.it/wiki/index.php?title=Gioco_a_bivi_javascript&diff=48&oldid=prev
Leoncino il 15:53, 29 ago 2014
2014-08-29T15:53:20Z
<p></p>
<table class='diff diff-contentalign-left'>
<col class='diff-marker' />
<col class='diff-content' />
<col class='diff-marker' />
<col class='diff-content' />
<tr style='vertical-align: top;'>
<td colspan='2' style="background-color: white; color:black; text-align: center;">← Versione meno recente</td>
<td colspan='2' style="background-color: white; color:black; text-align: center;">Versione delle 15:53, 29 ago 2014</td>
</tr><tr><td colspan="2" class="diff-lineno">Riga 6:</td>
<td colspan="2" class="diff-lineno">Riga 6:</td></tr>
<tr><td class='diff-marker'> </td><td style="background-color: #f9f9f9; color: #333333; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #e6e6e6; vertical-align: top; white-space: pre-wrap;"></td><td class='diff-marker'> </td><td style="background-color: #f9f9f9; color: #333333; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #e6e6e6; vertical-align: top; white-space: pre-wrap;"></td></tr>
<tr><td class='diff-marker'> </td><td style="background-color: #f9f9f9; color: #333333; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #e6e6e6; vertical-align: top; white-space: pre-wrap;"><div>Il passo successivo utilizza lo stile <span style="font-family:courier new,courier,monospace;">display:none</span> per nascondere i tre &lt;div&gt; degli ambienti di gioco, il codice diventa:</div></td><td class='diff-marker'> </td><td style="background-color: #f9f9f9; color: #333333; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #e6e6e6; vertical-align: top; white-space: pre-wrap;"><div>Il passo successivo utilizza lo stile <span style="font-family:courier new,courier,monospace;">display:none</span> per nascondere i tre &lt;div&gt; degli ambienti di gioco, il codice diventa:</div></td></tr>
<tr><td class='diff-marker'>−</td><td style="color:black; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #ffe49c; vertical-align: top; white-space: pre-wrap;"><div><div style="background:#eee;border:1px solid #ccc;padding:5px 10px;"><span style="font-family:courier new,courier,monospace;">&lt;html&gt;<br/>&nbsp;&nbsp; &nbsp;&lt;head&gt;<br/>&nbsp;&nbsp; &nbsp;&lt;title&gt;Gioco dei bivi col JavaScript&lt;/title&gt;<br/>&nbsp;&nbsp; &nbsp;&lt;/head&gt;<br/>&nbsp;&nbsp; &nbsp;&lt;body&gt;<br/>&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&lt;h1&gt;Gioco dei bivi col JavaScript&lt;/h1&gt;<br/>&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;<div id="inizio" <span style="background-color:#FFFF00;">style="display:none"</span>><br/>&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&lt;h2&gt;Davanti al ponte levatoio&lt;/h2&gt;<br/>&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&lt;p&gt;Ti trovi davanti a un castello che si dice contenga un prezioso tesoro.&lt;/p&gt;<br/>&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&lt;p&gt;Sembra un luogo molto pericoloso, ma il ponte levatoio è abbassato. Potrebbe essere una trappola?&lt;/p&gt;<br/>&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&lt;p&gt;Cosa preferisci, entrare dalla porta principale o attraversare il fossato a nuoto?&lt;/p&gt;<br/>&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&lt;input type="button" value="mi getto nel fossato pieno d'acqua"/&gt;<br/>&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&lt;input type="button" value="entro dalla porta principale" /&gt;<br/>&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&lt;/div&gt;&nbsp;&nbsp; &nbsp;<br/>&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;<div id="fossato" <span style="background-color:#FFFF00;">style="display:none"</span>><br/>&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&lt;h2&gt;Il fossato intorno al Castello&lt;/h2&gt;<br/>&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&lt;p&gt;Ehm...&lt;/p&gt;<br/>&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&lt;p&gt;C’erano i coccodrilli...&lt;/p&gt;<br/>&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&lt;p&gt;Che brutta fine! Mi dispiace.&lt;/p&gt;<br/>&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&lt;input type="button" value="ricomincia" /&gt;<br/>&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&lt;/div&gt;&nbsp;&nbsp; &nbsp;<br/>&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;<div id="salone" <span style="background-color:#FFFF00;">style="display:none"</span>><br/>&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&lt;h2&gt;Il Salone del Castello&lt;/h2&gt;<br/>&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&lt;p&gt;Sei entrato nel castello.&lt;/p&gt;<br/>&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&lt;p&gt;C’è un grande salone, arredato con fasto. Saccheggi completamente il castello e diventi ricco!&lt;/p&gt;<br/>&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&lt;p&gt;Complimenti......&lt;/p&gt;<br/>&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&lt;input type="button" name="ricomincia" value="ricomincia" /&gt;<br/>&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&lt;/div&gt;&nbsp;&nbsp; &nbsp;<br/>&nbsp;&nbsp; &nbsp;&lt;/body&gt;<br/>&lt;/html&gt;</span></div></div></td><td class='diff-marker'>+</td><td style="color:black; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #a3d3ff; vertical-align: top; white-space: pre-wrap;"><div><div style="background:#eee;border:1px solid #ccc;padding:5px 10px;"><span style="font-family:courier new,courier,monospace;">&lt;html&gt;<br/>&nbsp;&nbsp; &nbsp;&lt;head&gt;<br/>&nbsp;&nbsp; &nbsp;&lt;title&gt;Gioco dei bivi col JavaScript&lt;/title&gt;<br/>&nbsp;&nbsp; &nbsp;&lt;/head&gt;<br/>&nbsp;&nbsp; &nbsp;&lt;body&gt;<br/>&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&lt;h1&gt;Gioco dei bivi col JavaScript&lt;/h1&gt;<br/>&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;<div id="inizio" <span style="background-color:#FFFF00;">style="display:none"</span>><br/>&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&lt;h2&gt;Davanti al ponte levatoio&lt;/h2&gt;<br/>&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&lt;p&gt;Ti trovi davanti a un castello che si dice contenga un prezioso tesoro.&lt;/p&gt;<br/>&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&lt;p&gt;Sembra un luogo molto pericoloso, ma il ponte levatoio è abbassato. Potrebbe essere una trappola?&lt;/p&gt;<br/>&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&lt;p&gt;Cosa preferisci, entrare dalla porta principale o attraversare il fossato a nuoto?&lt;/p&gt;<br/>&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&lt;input type="button" value="mi getto nel fossato pieno d'acqua"/&gt;<br/>&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&lt;input type="button" value="entro dalla porta principale" /&gt;<br/>&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&lt;/div&gt;&nbsp;&nbsp; &nbsp;<br/>&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;<div id="fossato" <span style="background-color:#FFFF00;">style="display:none"</span>><br/>&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&lt;h2&gt;Il fossato intorno al Castello&lt;/h2&gt;<br/>&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&lt;p&gt;Ehm...&lt;/p&gt;<br/>&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&lt;p&gt;C’erano i coccodrilli...&lt;/p&gt;<br/>&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&lt;p&gt;Che brutta fine! Mi dispiace.&lt;/p&gt;<br/>&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&lt;input type="button" value="ricomincia" /&gt;<br/>&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&lt;/div&gt;&nbsp;&nbsp; &nbsp;<br/>&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;<div id="salone" <span style="background-color:#FFFF00;">style="display:none"</span>><br/>&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&lt;h2&gt;Il Salone del Castello&lt;/h2&gt;<br/>&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&lt;p&gt;Sei entrato nel castello.&lt;/p&gt;<br/>&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&lt;p&gt;C’è un grande salone, arredato con fasto. Saccheggi completamente il castello e diventi ricco!&lt;/p&gt;<br/>&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&lt;p&gt;Complimenti......&lt;/p&gt;<br/>&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&lt;input type="button" name="ricomincia" value="ricomincia" /&gt;<br/>&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&lt;/div&gt;&nbsp;&nbsp; &nbsp;<br/>&nbsp;&nbsp; &nbsp;&lt;/body&gt;<br/>&lt;/html&gt;</span></div><ins class="diffchange diffchange-inline"><span style="font-family:courier new,courier,monospace;"></span></ins></div></td></tr>
<tr><td colspan="2"> </td><td class='diff-marker'>+</td><td style="color:black; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #a3d3ff; vertical-align: top; white-space: pre-wrap;"><div><ins class="diffchange diffchange-inline">A questo punto si inserisce la logica (function mostraDiv agganciata all'evento onclick dei button) che fa apparire e scomparire i &lt;div&gt; dei vari ambienti.</ins></div></td></tr>
<tr><td colspan="2"> </td><td class='diff-marker'>+</td><td style="color:black; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #a3d3ff; vertical-align: top; white-space: pre-wrap;"><div><ins class="diffchange diffchange-inline"><div style="background:#eee;border:1px solid #ccc;padding:5px 10px;"><span style="font-family:courier new,courier,monospace;">&lt;html&gt;<br/>&nbsp;&nbsp; &nbsp;&lt;head&gt;<br/>&nbsp;&nbsp; &nbsp;&lt;title&gt;Gioco dei bivi col JavaScript&lt;/title&gt;<br/><span style="background-color:#FFFF00;">&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&lt;script&gt;</span><br/><span style="background-color:#FFFF00;">&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;function mostraDiv(situazione){</span><br/><span style="background-color:#FFFF00;">&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;document.getElementById('inizio').style.display="none";</span><br/><span style="background-color:#FFFF00;">&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;document.getElementById('fossato').style.display="none";</span><br/><span style="background-color:#FFFF00;">&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;document.getElementById('salone').style.display="none";</span><br/><span style="background-color:#FFFF00;">&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;document.getElementById(situazione).style.display="block";</span><br/><span style="background-color:#FFFF00;">&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;}&nbsp;&nbsp; &nbsp;</span><br/><span style="background-color:#FFFF00;">&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&lt;/script&gt;</span><br/>&nbsp;&nbsp; &nbsp;&lt;/head&gt;<br/>&nbsp;&nbsp; &nbsp;&lt;body onload="mostraDiv('inizio');"&gt;<br/>&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&lt;h1&gt;Gioco dei bivi col JavaScript&lt;/h1&gt;<br/>&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&lt;div id="inizio" style="display:none"&gt;<br/>&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&lt;h2&gt;Davanti al ponte levatoio&lt;/h2&gt;<br/>&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&lt;p&gt;Ti trovi davanti a un castello che si dice contenga un prezioso tesoro.&lt;/p&gt;<br/>&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&lt;p&gt;Sembra un luogo molto pericoloso, ma il ponte levatoio &egrave; abbassato. Potrebbe essere una trappola?&lt;/p&gt;<br/>&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&lt;p&gt;Cosa preferisci, entrare dalla porta principale o attraversare il fossato a nuoto?&lt;/p&gt;<br/>&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;<input type="button" value="mi getto nel fossato pieno d'acqua" <span style="background-color:#FFFF00;">onclick="mostraDiv('fossato');"</span> /><br/>&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;<input type="button" value="entro dalla porta principale" <span style="background-color:#FFFF00;">onclick="mostraDiv('salone');"</span> /><br/>&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&lt;/div&gt;&nbsp;&nbsp; &nbsp;<br/>&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&lt;div id="fossato" style="display:none"&gt;<br/>&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&lt;h2&gt;Il fossato intorno al Castello&lt;/h2&gt;<br/>&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&lt;p&gt;Ehm...&lt;/p&gt;<br/>&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&lt;p&gt;C&rsquo;erano i coccodrilli...&lt;/p&gt;<br/>&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&lt;p&gt;Che brutta fine! Mi dispiace.&lt;/p&gt;<br/>&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;<input type="button" value="ricomincia" <span style="background-color:#FFFF00;">onclick="mostraDiv('inizio');"</span> /><br/>&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&lt;/div&gt;&nbsp;&nbsp; &nbsp;<br/>&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&lt;div id="salone" style="display:none"&gt;<br/>&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&lt;h2&gt;Il Salone del Castello&lt;/h2&gt;<br/>&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&lt;p&gt;Sei entrato nel castello.&lt;/p&gt;<br/>&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&lt;p&gt;C&rsquo;&egrave; un grande salone, arredato con fasto. Saccheggi completamente il castello e diventi ricco!&lt;/p&gt;<br/>&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&lt;p&gt;Complimenti......&lt;/p&gt;<br/>&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;<input type="button" name="ricomincia" value="ricomincia" <span style="background-color:#FFFF00;">onclick="mostraDiv('inizio');"</span> /><br/>&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&lt;/div&gt;&nbsp;&nbsp; &nbsp;<br/>&nbsp;&nbsp; &nbsp;&lt;/body&gt;<br/>&lt;/html&gt;<br/></span></div></ins></div></td></tr>
<tr><td colspan="2"> </td><td class='diff-marker'>+</td><td style="color:black; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #a3d3ff; vertical-align: top; white-space: pre-wrap;"><div><ins class="diffchange diffchange-inline">L'ultimo passo è inserire qualche abbellimento tramite CSS:</ins></div></td></tr>
<tr><td colspan="2"> </td><td class='diff-marker'>+</td><td style="color:black; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #a3d3ff; vertical-align: top; white-space: pre-wrap;"><div><ins class="diffchange diffchange-inline"><div style="background:#eee;border:1px solid #ccc;padding:5px 10px;"><span style="font-family:courier new,courier,monospace;">&lt;html&gt;<br/>&nbsp;&nbsp; &nbsp;&lt;head&gt;<br/>&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;<span style="background-color:#FFFF00;">&lt;style&gt;</span><br/><span style="background-color:#FFFF00;">&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;h1{</span><br/><span style="background-color:#FFFF00;">&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;text-align: center;</span><br/><span style="background-color:#FFFF00;">&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;text-decoration: underline;}</span><br/><span style="background-color:#FFFF00;">&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;.situazione{</span><br/><span style="background-color:#FFFF00;">&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;display&nbsp;&nbsp; &nbsp;: none;</span><br/><span style="background-color:#FFFF00;">&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;margin: 5% auto;</span><br/><span style="background-color:#FFFF00;">&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;width: 90%;}</span><br/><span style="background-color:#FFFF00;">&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;.messaggio{</span><br/><span style="background-color:#FFFF00;">&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;background-color: yellow;</span><br/><span style="background-color:#FFFF00;">&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;color: blue;}</span><br/><span style="background-color:#FFFF00;">&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;.sconfitta{</span><br/><span style="background-color:#FFFF00;">&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;background-color: black;</span><br/><span style="background-color:#FFFF00;">&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;color: white;</span><br/><span style="background-color:#FFFF00;">&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;font-size: larger;</span><br/><span style="background-color:#FFFF00;">&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;text-align: center;}</span><br/><span style="background-color:#FFFF00;">&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;.centrato{</span><br/><span style="background-color:#FFFF00;">&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;text-align: center;}</span><br/><span style="background-color:#FFFF00;">&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&lt;/style&gt;</span><br/>&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&lt;script&gt;<br/>&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;function mostraDiv(situazione){<br/>&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;document.getElementById('inizio').style.display="none";<br/>&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;document.getElementById('fossato').style.display="none";<br/>&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;document.getElementById('salone').style.display="none";<br/>&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;document.getElementById(situazione).style.display="block";<br/>&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;}&nbsp;&nbsp; &nbsp;<br/>&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&lt;/script&gt;<br/>&nbsp;&nbsp; &nbsp;&lt;/head&gt;<br/>&nbsp;&nbsp; &nbsp;&lt;body onload="mostraDiv('inizio');"&gt;<br/>&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&lt;h1&gt;Gioco dei bivi&lt;/h1&gt;<br/>&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&lt;div id="inizio" class="situazione"&gt;<br/>&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&lt;h2&gt;Davanti al ponte levatoio&lt;/h2&gt;<br/>&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&lt;p&gt;Ti trovi davanti a un castello che si dice contenga un prezioso tesoro.&lt;/p&gt;<br/>&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&lt;p&gt;Sembra un luogo molto pericoloso, ma il ponte levatoio &egrave; abbassato. Potrebbe essere una trappola?&lt;/p&gt;<br/>&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;<p <span style="background-color:#FFFF00;">class="messaggio"</span>>Cosa preferisci, entrare dalla porta principale o attraversare il fossato a nuoto?&lt;/p&gt;<br/>&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&lt;input type="button" name="in_fossato" value="mi getto nel fossato pieno d'acqua" onclick="mostraDiv('fossato');" /&gt;<br/>&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&lt;input type="button" name="alla_porta" value="entro dalla porta principale" onclick="mostraDiv('salone');" /&gt;<br/>&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&lt;/div&gt;<br/>&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&lt;div id="fossato" class="situazione"&gt;<br/>&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&lt;h2&gt;Il fossato intorno al Castello&lt;/h2&gt;<br/>&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&lt;p&gt;Ehm...&lt;/p&gt;<br/>&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&lt;p&gt;C&rsquo;erano i coccodrilli...&lt;/p&gt;<br/>&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;<p <span style="background-color:#FFFF00;">class="sconfitta"</span>>Che brutta fine! Mi dispiace.&lt;/p&gt;<br/>&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&lt;input type="button" name="ricomincia" value="ricomincia" onclick="mostraDiv('inizio');" /&gt;<br/>&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&lt;/div&gt;<br/>&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&lt;div id="salone" class="situazione"&gt;<br/>&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&lt;h2&gt;Il Salone del Castello&lt;/h2&gt;<br/>&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&lt;p&gt;Sei entrato nel castello.&lt;/p&gt;<br/>&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&lt;p&gt;C&rsquo;&egrave; un grande salone, arredato con fasto. Saccheggi completamente il castello e diventi ricco!&lt;/p&gt;<br/>&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;<p <span style="background-color:#FFFF00;">class="messaggio"</span>>Complimenti......&lt;/p&gt;<br/>&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&lt;input type="button" name="ricomincia" value="ricomincia" onclick="mostraDiv('inizio');" /&gt;<br/>&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&lt;/div&gt;&nbsp;&nbsp; &nbsp;<br/>&nbsp;&nbsp; &nbsp;&lt;/body&gt;<br/>&lt;/html&gt;<br/></span></div></ins></div></td></tr>
<tr><td colspan="2"> </td><td class='diff-marker'>+</td><td style="color:black; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #a3d3ff; vertical-align: top; white-space: pre-wrap;"><div> </div></td></tr>
<tr><td colspan="2"> </td><td class='diff-marker'>+</td><td style="color:black; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #a3d3ff; vertical-align: top; white-space: pre-wrap;"><div> </div></td></tr>
<tr><td colspan="2"> </td><td class='diff-marker'>+</td><td style="color:black; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #a3d3ff; vertical-align: top; white-space: pre-wrap;"><div><ins class="diffchange diffchange-inline">[[Category:Javascript]]</ins></div></td></tr>
</table>
Leoncino
https://kata.coderdojo.it/wiki/index.php?title=Gioco_a_bivi_javascript&diff=47&oldid=prev
Leoncino il 15:45, 29 ago 2014
2014-08-29T15:45:11Z
<p></p>
<a href="https://kata.coderdojo.it/wiki/index.php?title=Gioco_a_bivi_javascript&diff=47&oldid=46">Mostra modifiche</a>
Leoncino
https://kata.coderdojo.it/wiki/index.php?title=Gioco_a_bivi_javascript&diff=46&oldid=prev
Leoncino il 15:44, 29 ago 2014
2014-08-29T15:44:16Z
<p></p>
<table class='diff diff-contentalign-left'>
<col class='diff-marker' />
<col class='diff-content' />
<col class='diff-marker' />
<col class='diff-content' />
<tr style='vertical-align: top;'>
<td colspan='2' style="background-color: white; color:black; text-align: center;">← Versione meno recente</td>
<td colspan='2' style="background-color: white; color:black; text-align: center;">Versione delle 15:44, 29 ago 2014</td>
</tr><tr><td colspan="2" class="diff-lineno">Riga 35:</td>
<td colspan="2" class="diff-lineno">Riga 35:</td></tr>
<tr><td class='diff-marker'> </td><td style="background-color: #f9f9f9; color: #333333; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #e6e6e6; vertical-align: top; white-space: pre-wrap;"></td><td class='diff-marker'> </td><td style="background-color: #f9f9f9; color: #333333; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #e6e6e6; vertical-align: top; white-space: pre-wrap;"></td></tr>
<tr><td class='diff-marker'> </td><td style="background-color: #f9f9f9; color: #333333; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #e6e6e6; vertical-align: top; white-space: pre-wrap;"><div>Il passo successivo utilizza lo stile <span style="font-family:courier new,courier,monospace;">display:none</span> per nascondere i tre &lt;div&gt; degli ambienti di gioco, il codice diventa:</div></td><td class='diff-marker'> </td><td style="background-color: #f9f9f9; color: #333333; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #e6e6e6; vertical-align: top; white-space: pre-wrap;"><div>Il passo successivo utilizza lo stile <span style="font-family:courier new,courier,monospace;">display:none</span> per nascondere i tre &lt;div&gt; degli ambienti di gioco, il codice diventa:</div></td></tr>
<tr><td class='diff-marker'>−</td><td style="color:black; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #ffe49c; vertical-align: top; white-space: pre-wrap;"><div> </div></td><td class='diff-marker'>+</td><td style="color:black; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #a3d3ff; vertical-align: top; white-space: pre-wrap;"><div><ins class="diffchange diffchange-inline"><div style="background:#eee;border:1px solid #ccc;padding:5px 10px;"></ins><span style="font-family:courier new,courier,monospace;">&lt;html&gt;<br/>&nbsp;&nbsp; &nbsp;&lt;head&gt;<br/>&nbsp;&nbsp; &nbsp;&lt;title&gt;Gioco dei bivi col JavaScript&lt;/title&gt;<br/>&nbsp;&nbsp; &nbsp;&lt;/head&gt;<br/>&nbsp;&nbsp; &nbsp;&lt;body&gt;<br/>&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&lt;h1&gt;Gioco dei bivi col JavaScript&lt;/h1&gt;<br/>&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&lt;div id="inizio" style="display:none"&gt;<br/>&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&lt;h2&gt;Davanti al ponte levatoio&lt;/h2&gt;<br/>&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&lt;p&gt;Ti trovi davanti a un castello che si dice contenga un prezioso tesoro.&lt;/p&gt;<br/>&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&lt;p&gt;Sembra un luogo molto pericoloso, ma il ponte levatoio è abbassato. Potrebbe essere una trappola?&lt;/p&gt;<br/>&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&lt;p&gt;Cosa preferisci, entrare dalla porta principale o attraversare il fossato a nuoto?&lt;/p&gt;<br/>&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&lt;input type="button" value="mi getto nel fossato pieno d'acqua"/&gt;<br/>&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&lt;input type="button" value="entro dalla porta principale" /&gt;<br/>&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&lt;/div&gt;&nbsp;&nbsp; &nbsp;<br/>&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;<div id="fossato" <span style="background-color:#FFFF00;">style="display:none"</span>><br/>&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&lt;h2&gt;Il fossato intorno al Castello&lt;/h2&gt;<br/>&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&lt;p&gt;Ehm...&lt;/p&gt;<br/>&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&lt;p&gt;C’erano i coccodrilli...&lt;/p&gt;<br/>&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&lt;p&gt;Che brutta fine! Mi dispiace.&lt;/p&gt;<br/>&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&lt;input type="button" value="ricomincia" /&gt;<br/>&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&lt;/div&gt;&nbsp;&nbsp; &nbsp;<br/>&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&lt;div id="salone" style="display:none"&gt;<br/>&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&lt;h2&gt;Il Salone del Castello&lt;/h2&gt;<br/>&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&lt;p&gt;Sei entrato nel castello.&lt;/p&gt;<br/>&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&lt;p&gt;C’è un grande salone, arredato con fasto. Saccheggi completamente il castello e diventi ricco!&lt;/p&gt;<br/>&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&lt;p&gt;Complimenti......&lt;/p&gt;<br/>&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&lt;input type="button" name="ricomincia" value="ricomincia" /&gt;<br/>&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&lt;/div&gt;&nbsp;&nbsp; &nbsp;<br/>&nbsp;&nbsp; &nbsp;&lt;/body&gt;<br/>&lt;/html&gt;</span<ins class="diffchange diffchange-inline">></div</ins>></div></td></tr>
<tr><td class='diff-marker'>−</td><td style="color:black; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #ffe49c; vertical-align: top; white-space: pre-wrap;"><div><span style="font-family:courier new,courier,monospace;">&lt;html&gt;<br/>&nbsp;&nbsp; &nbsp;&lt;head&gt;<br/>&nbsp;&nbsp; &nbsp;&lt;title&gt;Gioco dei bivi col JavaScript&lt;/title&gt;<br/>&nbsp;&nbsp; &nbsp;&lt;/head&gt;<br/>&nbsp;&nbsp; &nbsp;&lt;body&gt;<br/>&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&lt;h1&gt;Gioco dei bivi col JavaScript&lt;/h1&gt;<br/>&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&lt;div id="inizio" style="display:none"&gt;<br/>&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&lt;h2&gt;Davanti al ponte levatoio&lt;/h2&gt;<br/>&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&lt;p&gt;Ti trovi davanti a un castello che si dice contenga un prezioso tesoro.&lt;/p&gt;<br/>&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&lt;p&gt;Sembra un luogo molto pericoloso, ma il ponte levatoio è abbassato. Potrebbe essere una trappola?&lt;/p&gt;<br/>&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&lt;p&gt;Cosa preferisci, entrare dalla porta principale o attraversare il fossato a nuoto?&lt;/p&gt;<br/>&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&lt;input type="button" value="mi getto nel fossato pieno d'acqua"/&gt;<br/>&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&lt;input type="button" value="entro dalla porta principale" /&gt;<br/>&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&lt;/div&gt;&nbsp;&nbsp; &nbsp;<br/>&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;<div id="fossato" <span style="background-color:#FFFF00;">style="display:none"</span>><br/>&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&lt;h2&gt;Il fossato intorno al Castello&lt;/h2&gt;<br/>&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&lt;p&gt;Ehm...&lt;/p&gt;<br/>&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&lt;p&gt;C’erano i coccodrilli...&lt;/p&gt;<br/>&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&lt;p&gt;Che brutta fine! Mi dispiace.&lt;/p&gt;<br/>&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&lt;input type="button" value="ricomincia" /&gt;<br/>&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&lt;/div&gt;&nbsp;&nbsp; &nbsp;<br/>&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&lt;div id="salone" style="display:none"&gt;<br/>&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&lt;h2&gt;Il Salone del Castello&lt;/h2&gt;<br/>&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&lt;p&gt;Sei entrato nel castello.&lt;/p&gt;<br/>&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&lt;p&gt;C’è un grande salone, arredato con fasto. Saccheggi completamente il castello e diventi ricco!&lt;/p&gt;<br/>&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&lt;p&gt;Complimenti......&lt;/p&gt;<br/>&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&lt;input type="button" name="ricomincia" value="ricomincia" /&gt;<br/>&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&lt;/div&gt;&nbsp;&nbsp; &nbsp;<br/>&nbsp;&nbsp; &nbsp;&lt;/body&gt;<br/>&lt;/html&gt;</span></div></td><td class='diff-marker'>+</td><td style="color:black; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #a3d3ff; vertical-align: top; white-space: pre-wrap;"><div></div></td></tr>
</table>
Leoncino
https://kata.coderdojo.it/wiki/index.php?title=Gioco_a_bivi_javascript&diff=45&oldid=prev
Leoncino il 15:43, 29 ago 2014
2014-08-29T15:43:46Z
<p></p>
<table class='diff diff-contentalign-left'>
<col class='diff-marker' />
<col class='diff-content' />
<col class='diff-marker' />
<col class='diff-content' />
<tr style='vertical-align: top;'>
<td colspan='2' style="background-color: white; color:black; text-align: center;">← Versione meno recente</td>
<td colspan='2' style="background-color: white; color:black; text-align: center;">Versione delle 15:43, 29 ago 2014</td>
</tr><tr><td colspan="2" class="diff-lineno">Riga 11:</td>
<td colspan="2" class="diff-lineno">Riga 11:</td></tr>
<tr><td class='diff-marker'> </td><td style="background-color: #f9f9f9; color: #333333; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #e6e6e6; vertical-align: top; white-space: pre-wrap;"><div>&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;<h2>Davanti al ponte levatoio</h2></div></td><td class='diff-marker'> </td><td style="background-color: #f9f9f9; color: #333333; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #e6e6e6; vertical-align: top; white-space: pre-wrap;"><div>&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;<h2>Davanti al ponte levatoio</h2></div></td></tr>
<tr><td class='diff-marker'> </td><td style="background-color: #f9f9f9; color: #333333; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #e6e6e6; vertical-align: top; white-space: pre-wrap;"><div>&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;<p>Ti trovi davanti a un castello che si dice contenga un prezioso tesoro.</p></div></td><td class='diff-marker'> </td><td style="background-color: #f9f9f9; color: #333333; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #e6e6e6; vertical-align: top; white-space: pre-wrap;"><div>&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;<p>Ti trovi davanti a un castello che si dice contenga un prezioso tesoro.</p></div></td></tr>
<tr><td class='diff-marker'>−</td><td style="color:black; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #ffe49c; vertical-align: top; white-space: pre-wrap;"><div>&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;<p>Sembra un luogo molto pericoloso, ma il ponte levatoio <del class="diffchange diffchange-inline">&egrave; </del>abbassato. Potrebbe essere una trappola?</p></div></td><td class='diff-marker'>+</td><td style="color:black; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #a3d3ff; vertical-align: top; white-space: pre-wrap;"><div>&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;<p>Sembra un luogo molto pericoloso, ma il ponte levatoio <ins class="diffchange diffchange-inline">è </ins>abbassato. Potrebbe essere una trappola?</p></div></td></tr>
<tr><td class='diff-marker'> </td><td style="background-color: #f9f9f9; color: #333333; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #e6e6e6; vertical-align: top; white-space: pre-wrap;"><div>&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;<p>Cosa preferisci, entrare dalla porta principale o attraversare il fossato a nuoto?</p></div></td><td class='diff-marker'> </td><td style="background-color: #f9f9f9; color: #333333; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #e6e6e6; vertical-align: top; white-space: pre-wrap;"><div>&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;<p>Cosa preferisci, entrare dalla porta principale o attraversare il fossato a nuoto?</p></div></td></tr>
<tr><td class='diff-marker'> </td><td style="background-color: #f9f9f9; color: #333333; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #e6e6e6; vertical-align: top; white-space: pre-wrap;"><div>&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;<input type="button" value="mi getto nel fossato pieno d'acqua"/></div></td><td class='diff-marker'> </td><td style="background-color: #f9f9f9; color: #333333; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #e6e6e6; vertical-align: top; white-space: pre-wrap;"><div>&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;<input type="button" value="mi getto nel fossato pieno d'acqua"/></div></td></tr>
<tr><td colspan="2" class="diff-lineno">Riga 19:</td>
<td colspan="2" class="diff-lineno">Riga 19:</td></tr>
<tr><td class='diff-marker'> </td><td style="background-color: #f9f9f9; color: #333333; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #e6e6e6; vertical-align: top; white-space: pre-wrap;"><div>&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;<h2>Il fossato intorno al Castello</h2></div></td><td class='diff-marker'> </td><td style="background-color: #f9f9f9; color: #333333; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #e6e6e6; vertical-align: top; white-space: pre-wrap;"><div>&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;<h2>Il fossato intorno al Castello</h2></div></td></tr>
<tr><td class='diff-marker'> </td><td style="background-color: #f9f9f9; color: #333333; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #e6e6e6; vertical-align: top; white-space: pre-wrap;"><div>&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;<p>Ehm...</p></div></td><td class='diff-marker'> </td><td style="background-color: #f9f9f9; color: #333333; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #e6e6e6; vertical-align: top; white-space: pre-wrap;"><div>&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;<p>Ehm...</p></div></td></tr>
<tr><td class='diff-marker'>−</td><td style="color:black; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #ffe49c; vertical-align: top; white-space: pre-wrap;"><div>&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;<p><del class="diffchange diffchange-inline">C&rsquo;erano </del>i coccodrilli...</p></div></td><td class='diff-marker'>+</td><td style="color:black; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #a3d3ff; vertical-align: top; white-space: pre-wrap;"><div>&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;<p><ins class="diffchange diffchange-inline">C’erano </ins>i coccodrilli...</p></div></td></tr>
<tr><td class='diff-marker'> </td><td style="background-color: #f9f9f9; color: #333333; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #e6e6e6; vertical-align: top; white-space: pre-wrap;"><div>&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;<p>Che brutta fine! Mi dispiace.</p></div></td><td class='diff-marker'> </td><td style="background-color: #f9f9f9; color: #333333; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #e6e6e6; vertical-align: top; white-space: pre-wrap;"><div>&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;<p>Che brutta fine! Mi dispiace.</p></div></td></tr>
<tr><td class='diff-marker'> </td><td style="background-color: #f9f9f9; color: #333333; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #e6e6e6; vertical-align: top; white-space: pre-wrap;"><div>&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;<input type="button" value="ricomincia" /></div></td><td class='diff-marker'> </td><td style="background-color: #f9f9f9; color: #333333; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #e6e6e6; vertical-align: top; white-space: pre-wrap;"><div>&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;<input type="button" value="ricomincia" /></div></td></tr>
<tr><td colspan="2" class="diff-lineno">Riga 26:</td>
<td colspan="2" class="diff-lineno">Riga 26:</td></tr>
<tr><td class='diff-marker'> </td><td style="background-color: #f9f9f9; color: #333333; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #e6e6e6; vertical-align: top; white-space: pre-wrap;"><div>&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;<h2>Il Salone del Castello</h2></div></td><td class='diff-marker'> </td><td style="background-color: #f9f9f9; color: #333333; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #e6e6e6; vertical-align: top; white-space: pre-wrap;"><div>&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;<h2>Il Salone del Castello</h2></div></td></tr>
<tr><td class='diff-marker'> </td><td style="background-color: #f9f9f9; color: #333333; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #e6e6e6; vertical-align: top; white-space: pre-wrap;"><div>&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;<p>Sei entrato nel castello.</p></div></td><td class='diff-marker'> </td><td style="background-color: #f9f9f9; color: #333333; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #e6e6e6; vertical-align: top; white-space: pre-wrap;"><div>&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;<p>Sei entrato nel castello.</p></div></td></tr>
<tr><td class='diff-marker'>−</td><td style="color:black; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #ffe49c; vertical-align: top; white-space: pre-wrap;"><div>&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;<p><del class="diffchange diffchange-inline">C&rsquo;&egrave; </del>un grande salone, arredato con fasto. Saccheggi completamente il castello e diventi ricco!</p></div></td><td class='diff-marker'>+</td><td style="color:black; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #a3d3ff; vertical-align: top; white-space: pre-wrap;"><div>&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;<p><ins class="diffchange diffchange-inline">C’è </ins>un grande salone, arredato con fasto. Saccheggi completamente il castello e diventi ricco!</p></div></td></tr>
<tr><td class='diff-marker'> </td><td style="background-color: #f9f9f9; color: #333333; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #e6e6e6; vertical-align: top; white-space: pre-wrap;"><div>&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;<p>Complimenti......</p></div></td><td class='diff-marker'> </td><td style="background-color: #f9f9f9; color: #333333; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #e6e6e6; vertical-align: top; white-space: pre-wrap;"><div>&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;<p>Complimenti......</p></div></td></tr>
<tr><td class='diff-marker'> </td><td style="background-color: #f9f9f9; color: #333333; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #e6e6e6; vertical-align: top; white-space: pre-wrap;"><div>&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;<input type="button" name="ricomincia" value="ricomincia" /></div></td><td class='diff-marker'> </td><td style="background-color: #f9f9f9; color: #333333; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #e6e6e6; vertical-align: top; white-space: pre-wrap;"><div>&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;<input type="button" name="ricomincia" value="ricomincia" /></div></td></tr>
<tr><td colspan="2" class="diff-lineno">Riga 32:</td>
<td colspan="2" class="diff-lineno">Riga 32:</td></tr>
<tr><td class='diff-marker'> </td><td style="background-color: #f9f9f9; color: #333333; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #e6e6e6; vertical-align: top; white-space: pre-wrap;"><div>&nbsp;&nbsp; &nbsp;</body></div></td><td class='diff-marker'> </td><td style="background-color: #f9f9f9; color: #333333; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #e6e6e6; vertical-align: top; white-space: pre-wrap;"><div>&nbsp;&nbsp; &nbsp;</body></div></td></tr>
<tr><td class='diff-marker'> </td><td style="background-color: #f9f9f9; color: #333333; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #e6e6e6; vertical-align: top; white-space: pre-wrap;"><div></html></pre></div></td><td class='diff-marker'> </td><td style="background-color: #f9f9f9; color: #333333; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #e6e6e6; vertical-align: top; white-space: pre-wrap;"><div></html></pre></div></td></tr>
<tr><td class='diff-marker'>−</td><td style="color:black; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #ffe49c; vertical-align: top; white-space: pre-wrap;"><div>Questo codice, se visualizzato nel browser, mostra &nbsp;i tre ambienti di gioco&nbsp;uno di seguito all'altro.  </div></td><td class='diff-marker'>+</td><td style="color:black; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #a3d3ff; vertical-align: top; white-space: pre-wrap;"><div>Questo codice, se visualizzato nel browser, mostra &nbsp;i tre ambienti di gioco&nbsp;uno di seguito all'altro.</div></td></tr>
<tr><td class='diff-marker'> </td><td style="background-color: #f9f9f9; color: #333333; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #e6e6e6; vertical-align: top; white-space: pre-wrap;"></td><td class='diff-marker'> </td><td style="background-color: #f9f9f9; color: #333333; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #e6e6e6; vertical-align: top; white-space: pre-wrap;"></td></tr>
<tr><td class='diff-marker'> </td><td style="background-color: #f9f9f9; color: #333333; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #e6e6e6; vertical-align: top; white-space: pre-wrap;"><div>Il passo successivo utilizza lo stile <span style="font-family:courier new,courier,monospace;">display:none</span> per nascondere i tre &lt;div&gt; degli ambienti di gioco, il codice diventa:</div></td><td class='diff-marker'> </td><td style="background-color: #f9f9f9; color: #333333; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #e6e6e6; vertical-align: top; white-space: pre-wrap;"><div>Il passo successivo utilizza lo stile <span style="font-family:courier new,courier,monospace;">display:none</span> per nascondere i tre &lt;div&gt; degli ambienti di gioco, il codice diventa:</div></td></tr>
<tr><td class='diff-marker'>−</td><td style="color:black; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #ffe49c; vertical-align: top; white-space: pre-wrap;"><div><<del class="diffchange diffchange-inline">pre </del>style="<del class="diffchange diffchange-inline">border: 1px solid rgb(204, 204, 204); padding: 5px 10px; background</del>: <del class="diffchange diffchange-inline">rgb(238</del>, <del class="diffchange diffchange-inline">238</del>, <del class="diffchange diffchange-inline">238)</del>;"><del class="diffchange diffchange-inline"><</del>html></div></td><td class='diff-marker'>+</td><td style="color:black; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #a3d3ff; vertical-align: top; white-space: pre-wrap;"><div> </div></td></tr>
<tr><td class='diff-marker'>−</td><td style="color:black; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #ffe49c; vertical-align: top; white-space: pre-wrap;"><div>&nbsp;&nbsp; &nbsp;<del class="diffchange diffchange-inline"><</del>head></div></td><td class='diff-marker'>+</td><td style="color:black; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #a3d3ff; vertical-align: top; white-space: pre-wrap;"><div><<ins class="diffchange diffchange-inline">span </ins>style="<ins class="diffchange diffchange-inline">font-family</ins>:<ins class="diffchange diffchange-inline">courier new</ins>,<ins class="diffchange diffchange-inline">courier</ins>,<ins class="diffchange diffchange-inline">monospace</ins>;"><ins class="diffchange diffchange-inline">&lt;</ins>html<ins class="diffchange diffchange-inline">&gt;<br/</ins>>&nbsp;&nbsp; &nbsp;<ins class="diffchange diffchange-inline">&lt;</ins>head<ins class="diffchange diffchange-inline">&gt;<br/</ins>>&nbsp;&nbsp; &nbsp;<ins class="diffchange diffchange-inline">&lt;</ins>title<ins class="diffchange diffchange-inline">&gt;</ins>Gioco dei bivi col JavaScript<ins class="diffchange diffchange-inline">&lt;</ins>/title<ins class="diffchange diffchange-inline">&gt;<br/</ins>>&nbsp;&nbsp; &nbsp;<ins class="diffchange diffchange-inline">&lt;</ins>/head<ins class="diffchange diffchange-inline">&gt;<br/</ins>>&nbsp;&nbsp; &nbsp;<ins class="diffchange diffchange-inline">&lt;</ins>body<ins class="diffchange diffchange-inline">&gt;<br/</ins>>&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;<ins class="diffchange diffchange-inline">&lt;</ins>h1<ins class="diffchange diffchange-inline">&gt;</ins>Gioco dei bivi col JavaScript<ins class="diffchange diffchange-inline">&lt;</ins>/h1<ins class="diffchange diffchange-inline">&gt;<br/</ins>>&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;<ins class="diffchange diffchange-inline">&lt;</ins>div id="inizio" style="display:none"<ins class="diffchange diffchange-inline">&gt;</ins><<ins class="diffchange diffchange-inline">br</ins>/>&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;<ins class="diffchange diffchange-inline">&lt;</ins>h2<ins class="diffchange diffchange-inline">&gt;</ins>Davanti al ponte levatoio<ins class="diffchange diffchange-inline">&lt;/h2&gt;</ins><<ins class="diffchange diffchange-inline">br</ins>/>&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;<ins class="diffchange diffchange-inline">&lt;</ins>p<ins class="diffchange diffchange-inline">&gt;</ins>Ti trovi davanti a un castello che si dice contenga un prezioso tesoro.<ins class="diffchange diffchange-inline">&lt;</ins>/p<ins class="diffchange diffchange-inline">&gt;<br/</ins>>&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;<ins class="diffchange diffchange-inline">&lt;</ins>p<ins class="diffchange diffchange-inline">&gt;</ins>Sembra un luogo molto pericoloso, ma il ponte levatoio <ins class="diffchange diffchange-inline">è </ins>abbassato. Potrebbe essere una trappola?<ins class="diffchange diffchange-inline">&lt;</ins>/p<ins class="diffchange diffchange-inline">&gt;<br/</ins>>&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;<ins class="diffchange diffchange-inline">&lt;</ins>p<ins class="diffchange diffchange-inline">&gt;</ins>Cosa preferisci, entrare dalla porta principale o attraversare il fossato a nuoto?<ins class="diffchange diffchange-inline">&lt;</ins>/p<ins class="diffchange diffchange-inline">&gt;<br/</ins>>&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;<ins class="diffchange diffchange-inline">&lt;</ins>input type="button" value="mi getto nel fossato pieno d'acqua"<ins class="diffchange diffchange-inline">/&gt;<br</ins>/>&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;<ins class="diffchange diffchange-inline">&lt;</ins>input type="button" value="entro dalla porta principale" <ins class="diffchange diffchange-inline">/&gt;<br</ins>/>&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;<ins class="diffchange diffchange-inline">&lt;</ins>/div<ins class="diffchange diffchange-inline">&gt;</ins>&nbsp;&nbsp; &nbsp;<ins class="diffchange diffchange-inline"><br/></ins>&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;<div id="fossato" <span style="background-color:#FFFF00;">style="display:none"</span>><ins class="diffchange diffchange-inline"><br/></ins>&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;<ins class="diffchange diffchange-inline">&lt;</ins>h2<ins class="diffchange diffchange-inline">&gt;</ins>Il fossato intorno al Castello<ins class="diffchange diffchange-inline">&lt;</ins>/h2<ins class="diffchange diffchange-inline">&gt;<br/</ins>>&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;<ins class="diffchange diffchange-inline">&lt;</ins>p<ins class="diffchange diffchange-inline">&gt;</ins>Ehm...<ins class="diffchange diffchange-inline">&lt;</ins>/p<ins class="diffchange diffchange-inline">&gt;<br/</ins>>&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;<ins class="diffchange diffchange-inline">&lt;</ins>p&<ins class="diffchange diffchange-inline">gt</ins>;<ins class="diffchange diffchange-inline">C’erano </ins>i coccodrilli...<ins class="diffchange diffchange-inline">&lt;</ins>/p<ins class="diffchange diffchange-inline">&gt;<br/</ins>>&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;<ins class="diffchange diffchange-inline">&lt;</ins>p<ins class="diffchange diffchange-inline">&gt;</ins>Che brutta fine! Mi dispiace.<ins class="diffchange diffchange-inline">&lt;</ins>/p<ins class="diffchange diffchange-inline">&gt;<br/</ins>>&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;<ins class="diffchange diffchange-inline">&lt;</ins>input type="button" value="ricomincia" <ins class="diffchange diffchange-inline">/&gt;<br</ins>/>&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;<ins class="diffchange diffchange-inline">&lt;</ins>/div<ins class="diffchange diffchange-inline">&gt;</ins>&nbsp;&nbsp; &nbsp;<ins class="diffchange diffchange-inline"><br/></ins>&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;<ins class="diffchange diffchange-inline">&lt;</ins>div id="salone" style="display:none"<ins class="diffchange diffchange-inline">&gt;</ins><<ins class="diffchange diffchange-inline">br</ins>/>&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;<ins class="diffchange diffchange-inline">&lt;</ins>h2<ins class="diffchange diffchange-inline">&gt;</ins>Il Salone del Castello<ins class="diffchange diffchange-inline">&lt;</ins>/h2<ins class="diffchange diffchange-inline">&gt;<br/</ins>>&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;<ins class="diffchange diffchange-inline">&lt;</ins>p<ins class="diffchange diffchange-inline">&gt;</ins>Sei entrato nel castello.<ins class="diffchange diffchange-inline">&lt;</ins>/p<ins class="diffchange diffchange-inline">&gt;<br/</ins>>&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&<ins class="diffchange diffchange-inline">lt</ins>;<ins class="diffchange diffchange-inline">p</ins>&<ins class="diffchange diffchange-inline">gt</ins>;<ins class="diffchange diffchange-inline">C’è </ins>un grande salone, arredato con fasto. Saccheggi completamente il castello e diventi ricco!<ins class="diffchange diffchange-inline">&lt;</ins>/p<ins class="diffchange diffchange-inline">&gt;<br/</ins>>&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;<ins class="diffchange diffchange-inline">&lt;</ins>p<ins class="diffchange diffchange-inline">&gt;</ins>Complimenti......<ins class="diffchange diffchange-inline">&lt;</ins>/p<ins class="diffchange diffchange-inline">&gt;<br/</ins>>&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;<ins class="diffchange diffchange-inline">&lt;</ins>input type="button" name="ricomincia" value="ricomincia" <ins class="diffchange diffchange-inline">/&gt;<br</ins>/>&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;<ins class="diffchange diffchange-inline">&lt;</ins>/div<ins class="diffchange diffchange-inline">&gt;</ins>&nbsp;&nbsp; &nbsp;<ins class="diffchange diffchange-inline"><br/></ins>&nbsp;&nbsp; &nbsp;<ins class="diffchange diffchange-inline">&lt;</ins>/body<ins class="diffchange diffchange-inline">&gt;</ins><<ins class="diffchange diffchange-inline">br</ins>/><ins class="diffchange diffchange-inline">&lt;/html&gt;</ins></<ins class="diffchange diffchange-inline">span</ins>></div></td></tr>
<tr><td class='diff-marker'>−</td><td style="color:black; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #ffe49c; vertical-align: top; white-space: pre-wrap;"><div>&nbsp;&nbsp; &nbsp;<del class="diffchange diffchange-inline"><</del>title<del class="diffchange diffchange-inline">></del>Gioco dei bivi col JavaScript<del class="diffchange diffchange-inline"><</del>/title></div></td><td class='diff-marker'>+</td><td style="color:black; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #a3d3ff; vertical-align: top; white-space: pre-wrap;"><div></div></td></tr>
<tr><td class='diff-marker'>−</td><td style="color:black; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #ffe49c; vertical-align: top; white-space: pre-wrap;"><div>&nbsp;&nbsp; &nbsp;<del class="diffchange diffchange-inline"><</del>/head></div></td><td class='diff-marker'>+</td><td style="color:black; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #a3d3ff; vertical-align: top; white-space: pre-wrap;"><div></div></td></tr>
<tr><td class='diff-marker'>−</td><td style="color:black; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #ffe49c; vertical-align: top; white-space: pre-wrap;"><div>&nbsp;&nbsp; &nbsp;<del class="diffchange diffchange-inline"><</del>body></div></td><td class='diff-marker'>+</td><td style="color:black; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #a3d3ff; vertical-align: top; white-space: pre-wrap;"><div></div></td></tr>
<tr><td class='diff-marker'>−</td><td style="color:black; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #ffe49c; vertical-align: top; white-space: pre-wrap;"><div>&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;<del class="diffchange diffchange-inline"><</del>h1<del class="diffchange diffchange-inline">></del>Gioco dei bivi col JavaScript<del class="diffchange diffchange-inline"><</del>/h1></div></td><td class='diff-marker'>+</td><td style="color:black; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #a3d3ff; vertical-align: top; white-space: pre-wrap;"><div></div></td></tr>
<tr><td class='diff-marker'>−</td><td style="color:black; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #ffe49c; vertical-align: top; white-space: pre-wrap;"><div>&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;<del class="diffchange diffchange-inline"><</del>div id="inizio" <del class="diffchange diffchange-inline"><span style="background-color:#FFFF00;"></del>style="display:none"</<del class="diffchange diffchange-inline">span</del>><del class="diffchange diffchange-inline">></del></div></td><td class='diff-marker'>+</td><td style="color:black; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #a3d3ff; vertical-align: top; white-space: pre-wrap;"><div></div></td></tr>
<tr><td class='diff-marker'>−</td><td style="color:black; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #ffe49c; vertical-align: top; white-space: pre-wrap;"><div>&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;<del class="diffchange diffchange-inline"><</del>h2<del class="diffchange diffchange-inline">></del>Davanti al ponte levatoio</<del class="diffchange diffchange-inline">h2</del>></div></td><td class='diff-marker'>+</td><td style="color:black; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #a3d3ff; vertical-align: top; white-space: pre-wrap;"><div></div></td></tr>
<tr><td class='diff-marker'>−</td><td style="color:black; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #ffe49c; vertical-align: top; white-space: pre-wrap;"><div>&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;<del class="diffchange diffchange-inline"><</del>p<del class="diffchange diffchange-inline">></del>Ti trovi davanti a un castello che si dice contenga un prezioso tesoro.<del class="diffchange diffchange-inline"><</del>/p></div></td><td class='diff-marker'>+</td><td style="color:black; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #a3d3ff; vertical-align: top; white-space: pre-wrap;"><div></div></td></tr>
<tr><td class='diff-marker'>−</td><td style="color:black; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #ffe49c; vertical-align: top; white-space: pre-wrap;"><div>&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;<del class="diffchange diffchange-inline"><</del>p<del class="diffchange diffchange-inline">></del>Sembra un luogo molto pericoloso, ma il ponte levatoio <del class="diffchange diffchange-inline">&egrave; </del>abbassato. Potrebbe essere una trappola?<del class="diffchange diffchange-inline"><</del>/p></div></td><td class='diff-marker'>+</td><td style="color:black; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #a3d3ff; vertical-align: top; white-space: pre-wrap;"><div></div></td></tr>
<tr><td class='diff-marker'>−</td><td style="color:black; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #ffe49c; vertical-align: top; white-space: pre-wrap;"><div>&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;<del class="diffchange diffchange-inline"><</del>p<del class="diffchange diffchange-inline">></del>Cosa preferisci, entrare dalla porta principale o attraversare il fossato a nuoto?<del class="diffchange diffchange-inline"><</del>/p></div></td><td class='diff-marker'>+</td><td style="color:black; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #a3d3ff; vertical-align: top; white-space: pre-wrap;"><div></div></td></tr>
<tr><td class='diff-marker'>−</td><td style="color:black; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #ffe49c; vertical-align: top; white-space: pre-wrap;"><div>&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;<del class="diffchange diffchange-inline"><</del>input type="button" value="mi getto nel fossato pieno d'acqua"/></div></td><td class='diff-marker'>+</td><td style="color:black; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #a3d3ff; vertical-align: top; white-space: pre-wrap;"><div></div></td></tr>
<tr><td class='diff-marker'>−</td><td style="color:black; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #ffe49c; vertical-align: top; white-space: pre-wrap;"><div>&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;<del class="diffchange diffchange-inline"><</del>input type="button" value="entro dalla porta principale" /></div></td><td class='diff-marker'>+</td><td style="color:black; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #a3d3ff; vertical-align: top; white-space: pre-wrap;"><div></div></td></tr>
<tr><td class='diff-marker'>−</td><td style="color:black; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #ffe49c; vertical-align: top; white-space: pre-wrap;"><div>&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;<del class="diffchange diffchange-inline"><</del>/div<del class="diffchange diffchange-inline">></del>&nbsp;&nbsp; &nbsp;</div></td><td class='diff-marker'>+</td><td style="color:black; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #a3d3ff; vertical-align: top; white-space: pre-wrap;"><div></div></td></tr>
<tr><td class='diff-marker'>−</td><td style="color:black; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #ffe49c; vertical-align: top; white-space: pre-wrap;"><div>&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;<div id="fossato" <span style="background-color:#FFFF00;">style="display:none"</span>></div></td><td class='diff-marker'>+</td><td style="color:black; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #a3d3ff; vertical-align: top; white-space: pre-wrap;"><div></div></td></tr>
<tr><td class='diff-marker'>−</td><td style="color:black; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #ffe49c; vertical-align: top; white-space: pre-wrap;"><div>&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;<del class="diffchange diffchange-inline"><</del>h2<del class="diffchange diffchange-inline">></del>Il fossato intorno al Castello<del class="diffchange diffchange-inline"><</del>/h2></div></td><td class='diff-marker'>+</td><td style="color:black; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #a3d3ff; vertical-align: top; white-space: pre-wrap;"><div></div></td></tr>
<tr><td class='diff-marker'>−</td><td style="color:black; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #ffe49c; vertical-align: top; white-space: pre-wrap;"><div>&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;<del class="diffchange diffchange-inline"><</del>p<del class="diffchange diffchange-inline">></del>Ehm...<del class="diffchange diffchange-inline"><</del>/p></div></td><td class='diff-marker'>+</td><td style="color:black; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #a3d3ff; vertical-align: top; white-space: pre-wrap;"><div></div></td></tr>
<tr><td class='diff-marker'>−</td><td style="color:black; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #ffe49c; vertical-align: top; white-space: pre-wrap;"><div>&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;<del class="diffchange diffchange-inline"><</del>p<del class="diffchange diffchange-inline">>C</del>&<del class="diffchange diffchange-inline">rsquo</del>;<del class="diffchange diffchange-inline">erano </del>i coccodrilli...<del class="diffchange diffchange-inline"><</del>/p></div></td><td class='diff-marker'>+</td><td style="color:black; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #a3d3ff; vertical-align: top; white-space: pre-wrap;"><div></div></td></tr>
<tr><td class='diff-marker'>−</td><td style="color:black; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #ffe49c; vertical-align: top; white-space: pre-wrap;"><div>&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;<del class="diffchange diffchange-inline"><</del>p<del class="diffchange diffchange-inline">></del>Che brutta fine! Mi dispiace.<del class="diffchange diffchange-inline"><</del>/p></div></td><td class='diff-marker'>+</td><td style="color:black; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #a3d3ff; vertical-align: top; white-space: pre-wrap;"><div></div></td></tr>
<tr><td class='diff-marker'>−</td><td style="color:black; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #ffe49c; vertical-align: top; white-space: pre-wrap;"><div>&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;<del class="diffchange diffchange-inline"><</del>input type="button" value="ricomincia" /></div></td><td class='diff-marker'>+</td><td style="color:black; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #a3d3ff; vertical-align: top; white-space: pre-wrap;"><div></div></td></tr>
<tr><td class='diff-marker'>−</td><td style="color:black; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #ffe49c; vertical-align: top; white-space: pre-wrap;"><div>&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;<del class="diffchange diffchange-inline"><</del>/div<del class="diffchange diffchange-inline">></del>&nbsp;&nbsp; &nbsp;</div></td><td class='diff-marker'>+</td><td style="color:black; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #a3d3ff; vertical-align: top; white-space: pre-wrap;"><div></div></td></tr>
<tr><td class='diff-marker'>−</td><td style="color:black; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #ffe49c; vertical-align: top; white-space: pre-wrap;"><div>&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;<del class="diffchange diffchange-inline"><</del>div id="salone" <del class="diffchange diffchange-inline"><span style="background-color:#FFFF00;"></del>style="display:none"</<del class="diffchange diffchange-inline">span</del>><del class="diffchange diffchange-inline">></del></div></td><td class='diff-marker'>+</td><td style="color:black; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #a3d3ff; vertical-align: top; white-space: pre-wrap;"><div></div></td></tr>
<tr><td class='diff-marker'>−</td><td style="color:black; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #ffe49c; vertical-align: top; white-space: pre-wrap;"><div>&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;<del class="diffchange diffchange-inline"><</del>h2<del class="diffchange diffchange-inline">></del>Il Salone del Castello<del class="diffchange diffchange-inline"><</del>/h2></div></td><td class='diff-marker'>+</td><td style="color:black; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #a3d3ff; vertical-align: top; white-space: pre-wrap;"><div></div></td></tr>
<tr><td class='diff-marker'>−</td><td style="color:black; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #ffe49c; vertical-align: top; white-space: pre-wrap;"><div>&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;<del class="diffchange diffchange-inline"><</del>p<del class="diffchange diffchange-inline">></del>Sei entrato nel castello.<del class="diffchange diffchange-inline"><</del>/p></div></td><td class='diff-marker'>+</td><td style="color:black; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #a3d3ff; vertical-align: top; white-space: pre-wrap;"><div></div></td></tr>
<tr><td class='diff-marker'>−</td><td style="color:black; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #ffe49c; vertical-align: top; white-space: pre-wrap;"><div>&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;<del class="diffchange diffchange-inline"><p>C</del>&<del class="diffchange diffchange-inline">rsquo</del>;&<del class="diffchange diffchange-inline">egrave</del>; un grande salone, arredato con fasto. Saccheggi completamente il castello e diventi ricco!<del class="diffchange diffchange-inline"><</del>/p></div></td><td class='diff-marker'>+</td><td style="color:black; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #a3d3ff; vertical-align: top; white-space: pre-wrap;"><div></div></td></tr>
<tr><td class='diff-marker'>−</td><td style="color:black; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #ffe49c; vertical-align: top; white-space: pre-wrap;"><div>&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;<del class="diffchange diffchange-inline"><</del>p<del class="diffchange diffchange-inline">></del>Complimenti......<del class="diffchange diffchange-inline"><</del>/p></div></td><td class='diff-marker'>+</td><td style="color:black; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #a3d3ff; vertical-align: top; white-space: pre-wrap;"><div></div></td></tr>
<tr><td class='diff-marker'>−</td><td style="color:black; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #ffe49c; vertical-align: top; white-space: pre-wrap;"><div>&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;<del class="diffchange diffchange-inline"><</del>input type="button" name="ricomincia" value="ricomincia" /></div></td><td class='diff-marker'>+</td><td style="color:black; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #a3d3ff; vertical-align: top; white-space: pre-wrap;"><div></div></td></tr>
<tr><td class='diff-marker'>−</td><td style="color:black; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #ffe49c; vertical-align: top; white-space: pre-wrap;"><div>&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;<del class="diffchange diffchange-inline"><</del>/div<del class="diffchange diffchange-inline">></del>&nbsp;&nbsp; &nbsp;</div></td><td class='diff-marker'>+</td><td style="color:black; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #a3d3ff; vertical-align: top; white-space: pre-wrap;"><div></div></td></tr>
<tr><td class='diff-marker'>−</td><td style="color:black; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #ffe49c; vertical-align: top; white-space: pre-wrap;"><div>&nbsp;&nbsp; &nbsp;<del class="diffchange diffchange-inline"><</del>/body<del class="diffchange diffchange-inline">></del></div></td><td class='diff-marker'>+</td><td style="color:black; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #a3d3ff; vertical-align: top; white-space: pre-wrap;"><div></div></td></tr>
<tr><td class='diff-marker'>−</td><td style="color:black; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #ffe49c; vertical-align: top; white-space: pre-wrap;"><div></<del class="diffchange diffchange-inline">html</del>></div></td><td class='diff-marker'>+</td><td style="color:black; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #a3d3ff; vertical-align: top; white-space: pre-wrap;"><div></div></td></tr>
<tr><td class='diff-marker'>−</td><td style="color:black; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #ffe49c; vertical-align: top; white-space: pre-wrap;"><div></<del class="diffchange diffchange-inline">pre</del>></div></td><td class='diff-marker'>+</td><td style="color:black; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #a3d3ff; vertical-align: top; white-space: pre-wrap;"><div></div></td></tr>
</table>
Leoncino
https://kata.coderdojo.it/wiki/index.php?title=Gioco_a_bivi_javascript&diff=44&oldid=prev
Leoncino: Creata pagina con "Il gioco a bivi descritto nella sezione [http://kata.coderdojo.it/wiki/index.php?title=Gioco_a_bivi_html html] rivisto con il Javascript. In pratica non si usano link a p..."
2014-08-29T15:41:44Z
<p>Creata pagina con "Il gioco a bivi descritto nella sezione [http://kata.coderdojo.it/wiki/index.php?title=Gioco_a_bivi_html html] rivisto con il Javascript. In pratica non si usano link a p..."</p>
<p><b>Nuova pagina</b></p><div>Il gioco a bivi descritto nella sezione [http://kata.coderdojo.it/wiki/index.php?title=Gioco_a_bivi_html html]&nbsp;rivisto con il Javascript. In pratica non si usano link a pagine diverse per passare da stanza a stanza, bensì si carica una pagina che contiene sia la parte grafica html che la parte di logica in javascript.<br />
<br />
E' utile articolare in passi l'esercizio fornendo il seguente codice html:<br />
<pre style="border: 1px solid rgb(204, 204, 204); padding: 5px 10px; background: rgb(238, 238, 238);"><html><br />
&nbsp;&nbsp; &nbsp;<head><br />
&nbsp;&nbsp; &nbsp;<title>Gioco dei bivi col JavaScript</title><br />
&nbsp;&nbsp; &nbsp;</head><br />
&nbsp;&nbsp; &nbsp;<body><br />
&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;<h1>Gioco dei bivi col JavaScript</h1><br />
&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;<div id="inizio"><br />
&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;<h2>Davanti al ponte levatoio</h2><br />
&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;<p>Ti trovi davanti a un castello che si dice contenga un prezioso tesoro.</p><br />
&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;<p>Sembra un luogo molto pericoloso, ma il ponte levatoio &egrave; abbassato. Potrebbe essere una trappola?</p><br />
&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;<p>Cosa preferisci, entrare dalla porta principale o attraversare il fossato a nuoto?</p><br />
&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;<input type="button" value="mi getto nel fossato pieno d'acqua"/><br />
&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;<input type="button" value="entro dalla porta principale" /><br />
&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;</div>&nbsp;&nbsp; &nbsp;<br />
&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;<div id="fossato"><br />
&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;<h2>Il fossato intorno al Castello</h2><br />
&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;<p>Ehm...</p><br />
&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;<p>C&rsquo;erano i coccodrilli...</p><br />
&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;<p>Che brutta fine! Mi dispiace.</p><br />
&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;<input type="button" value="ricomincia" /><br />
&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;</div>&nbsp;&nbsp; &nbsp;<br />
&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;<div id="salone"><br />
&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;<h2>Il Salone del Castello</h2><br />
&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;<p>Sei entrato nel castello.</p><br />
&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;<p>C&rsquo;&egrave; un grande salone, arredato con fasto. Saccheggi completamente il castello e diventi ricco!</p><br />
&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;<p>Complimenti......</p><br />
&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;<input type="button" name="ricomincia" value="ricomincia" /><br />
&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;</div>&nbsp;&nbsp; &nbsp;<br />
&nbsp;&nbsp; &nbsp;</body><br />
</html></pre><br />
Questo codice, se visualizzato nel browser, mostra &nbsp;i tre ambienti di gioco&nbsp;uno di seguito all'altro. <br />
<br />
Il passo successivo utilizza lo stile <span style="font-family:courier new,courier,monospace;">display:none</span> per nascondere i tre &lt;div&gt; degli ambienti di gioco, il codice diventa:<br />
<pre style="border: 1px solid rgb(204, 204, 204); padding: 5px 10px; background: rgb(238, 238, 238);"><html><br />
&nbsp;&nbsp; &nbsp;<head><br />
&nbsp;&nbsp; &nbsp;<title>Gioco dei bivi col JavaScript</title><br />
&nbsp;&nbsp; &nbsp;</head><br />
&nbsp;&nbsp; &nbsp;<body><br />
&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;<h1>Gioco dei bivi col JavaScript</h1><br />
&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;<div id="inizio" <span style="background-color:#FFFF00;">style="display:none"</span>><br />
&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;<h2>Davanti al ponte levatoio</h2><br />
&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;<p>Ti trovi davanti a un castello che si dice contenga un prezioso tesoro.</p><br />
&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;<p>Sembra un luogo molto pericoloso, ma il ponte levatoio &egrave; abbassato. Potrebbe essere una trappola?</p><br />
&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;<p>Cosa preferisci, entrare dalla porta principale o attraversare il fossato a nuoto?</p><br />
&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;<input type="button" value="mi getto nel fossato pieno d'acqua"/><br />
&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;<input type="button" value="entro dalla porta principale" /><br />
&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;</div>&nbsp;&nbsp; &nbsp;<br />
&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;<div id="fossato" <span style="background-color:#FFFF00;">style="display:none"</span>><br />
&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;<h2>Il fossato intorno al Castello</h2><br />
&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;<p>Ehm...</p><br />
&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;<p>C&rsquo;erano i coccodrilli...</p><br />
&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;<p>Che brutta fine! Mi dispiace.</p><br />
&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;<input type="button" value="ricomincia" /><br />
&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;</div>&nbsp;&nbsp; &nbsp;<br />
&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;<div id="salone" <span style="background-color:#FFFF00;">style="display:none"</span>><br />
&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;<h2>Il Salone del Castello</h2><br />
&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;<p>Sei entrato nel castello.</p><br />
&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;<p>C&rsquo;&egrave; un grande salone, arredato con fasto. Saccheggi completamente il castello e diventi ricco!</p><br />
&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;<p>Complimenti......</p><br />
&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;<input type="button" name="ricomincia" value="ricomincia" /><br />
&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;</div>&nbsp;&nbsp; &nbsp;<br />
&nbsp;&nbsp; &nbsp;</body><br />
</html><br />
</pre></div>
Leoncino