Inline-SVG steuern - Quelltext

zurück zur Demo-Seite 
<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <title>Inline-SVG steuern</title>
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
    <style>
      body  {
        font-family:sans-serif;
      }
    </style>
  </head>
  <body>
    <h1>Inline-SVG steuern</h1>
    
    <p>Hier am Beispiel von drei Leveln</p>

<!-- START SVG-Grafik inline -->
<!-- <?xml version="1.0" encoding="UTF-8" ?> -->
<svg xmlns="http://www.w3.org/2000/svg" 
     xmlns:xlink="http://www.w3.org/1999/xlink"
     version="1.1"
     width="120" height="70">

<!-- START Skript innerhalb der SVG-Grafik -->
<script type="text/ecmascript">
<![CDATA[

function zeige_level(nr) {
    console.log('zeige_level: '+nr);
    var objekte_des_levels=document.getElementsByClassName(nr);
    //console.log(objekte_des_levels);
    for (var i=0; i < objekte_des_levels.length; i++) {
        //console.log(objekte_des_levels[i]);
        objekte_des_levels[i].setAttribute('visibility', 'visible');
    }
    var levelanzeige=document.getElementById('levelanzeige_als_text');
    console.log(levelanzeige);
    levelanzeige.textContent='Level: '+nr;
}

]]>
</script>
<!-- ENDE Skript innerhalb der SVG-Grafik -->

<!-- START Style innerhalb der SVG-Grafik -->
<style>
text {
  font-family:monospace;
  font-size:16px;
}
circle {
  stroke:#bebebe;
  stroke-width:1px;
}
</style>
<!-- ENDE Style innerhalb der SVG-Grafik -->


<rect id="hintegrundflaeche" x="0" y="0" width="120" height="70" fill="#f2f2f2"></rect>

<!-- Objekte Level 1 -->
<circle class="eins" cx="10" cy="10" r="5" fill="red" visibility="hidden" />
<text class="eins" x="5" y="35" fill="red" visibility="hidden">1</text>

<!-- Objekte Level 2 -->
<circle class="zwei" cx="30" cy="10" r="5" fill="yellow"  visibility="hidden" />
<text class="zwei" x="25" y="35" fill="yellow" visibility="hidden">2</text>

<!-- Objekte Level 3 -->
<circle class="drei" cx="50" cy="10" r="5" fill="green" visibility="hidden" />
<text class="drei" x="45" y="35" fill="green" visibility="hidden">3</text>

<text id="levelanzeige_als_text" x="10" y="60">Level: </text>

</svg>
<!-- END SVG-Grafik inline -->

    <p>Prinzip<br />
       Das Skript mit der Anzeige bzw. Ausblende-Logik liegt innerhalb der inline SVG-Datei.
       Von Außen wird das aktuelle Level als Parameter einer in diesem SVG internen Skript liegenden Funktion übergeben.
       </p>
       
    <p>Wie geht das?<br />
       Lies den Seitenquelltext der inline-SVG-Grafik dieser Beispielseite mit <kbd>Strg</kbd>+<kbd>U</kbd>
       
    </p>
    
    <p>Wofür?<br />
       Mit dieser Technik ließen sich prinzipiell bspw. Lernlandkarten oder 
       andere selbst gestaltbare Gamification-Elemente in Moodle-Kurse einbauen.</p>
    
    <p>Ausprobieren?<br />
       Auskommentieren z.B. des dritten 
       Skript-Schnipsels mit 
       vorangestelltem <tt><!--</tt> und 
       angehängtem <tt>--></tt> und 
       Neuladen einer lokal gespeicherten Kopie dieser Seite 
       sollte nur noch die Level 1+2 anzeigen</p>
       
    <p>In Moodle einsetzen?<br />
       An Stelle der hier auf dieser Testseite eingesetzten ready Funktion 
       den jQuery-Nachlade-Schnipsel von
       <a href="https://quizdidaktik.de/indilearning2021-moodle-hacks/index.html">quizdidaktik.de/indilearning2021-moodle-hacks</a> 
       Abschnitt "Inhalte oder Skripte verzögert nachladen" einsetzen und
       jeden Skript-Schnipsel in ein eigenes Textfeld verpacken.
       Über die jeweilige Zeitverzögerung in der setTimeout Funktion kann die Ladereihenfolge nötigenfalls nachjustiert werden.
       </p>
    
    <p>erster Skript-Schnipsel über bedingte Verfügbarkeit</p>
    <script>
    $(document).ready(function(){
          console.log('Schnipsel eins');
          zeige_level('eins');
      });
    </script>
    
    <p>zweiter Skript-Schnipsel über bedingte Verfügbarkeit</p>
    <script>
      $(document).ready(function(){
          console.log('Schnipsel zwei');
          zeige_level('zwei');
      });
    </script>
    
    <p>dritter Skript-Schnipsel über bedingte Verfügbarkeit</p>
    <script>
      $(document).ready(function(){
          console.log('Schnipsel drei');
          zeige_level('drei');
      });
    </script>
    

  </body>
</html>