AnleitungTextDrag

Eigene Arbeitsblätter erstellen

Vorbereitung: Installation von VisualStudioCode und dem Plugin LiveServer

1. Neuer Ordner erstellen
   a) data.json hineinkopieren
   b) PNG-Datei des Arbeitsblattes in den Ordner schieben
   c) index.html hineinkopieren
   
2 data.json anpassen:

{   "snap":false,  // das Programm befindet sich im Erstellungsmodus

    "dateiname":  "DATEINAME DER PNG-DATEI",
    "copyright":"QUELLENANGABE DES BILDES",
    "titel":"TITEL DER HTML-SEITE UND ÜBERSCHRIFT",
    "angabe":"AUFGABENSTELLUNG",
    "positionsmarken":true,   BEI TRUE MARKIEREN KLEINE QUADRATE DIE MÖGLICHEN POSITIONEN, BEI FALSE NICHT

    HIER: text-Attribute anpassen (max. 10 Stück), x,y, pos werden später gesetzt
    "txt":[
      { "x": 0.36, "y": 0.457, "text": "mRNS", "pos": [0] },
      { "x": 0.416, "y": 0.728, "text": "am Ribosom", "pos": [1,5,7] },
      { "x": 0.367, "y": 0.071, "text": "DNS", "pos": [2] },
      { "x": 0.357, "y": 0.89, "text": "Protein", "pos": [3] },
      { "x": 0.267, "y": 0.23, "text": "Transkription", "pos": [6,4] },
      { "x": 0.265, "y": 0.679, "text": "Translation", "pos": [1,5,7] },
      { "x": 0.405, "y": 0.228, "text": "im Zellkern", "pos": [6,4] },
      { "x": 0.417, "y": 0.627, "text": "im Zellplasma", "pos": [1,5,7] }
]}

3.	Ermitteln der Koordinaten

index.html in VisualStudioCode öffnen
Rechtsklick "Open with Live Server"
Textbausteine an die richtige Stelle im Arbeitsblatt ziehen. 
Unterhalb des Arbeitsblattes werden die Koordinaten ausgegeben.
Die Textbausteine möglichst in einer vermischten Reihenfolge auf die Positionen ziehen.

4.	Übertragen der Koordinaten in "data.json"
Im Browser die ausgegebenen Daten kopieren und in die data.json-Datei einfügen.
Wenn Textbausteine an mehreren Positionen richtig sind, müssen diese im Feld pos eingetragen werden:
      { x: 0.36, y: 0.457, text: 'mRNS', pos: [0] },
      { x: 0.416, y: 0.728, text: 'am Ribosom', pos: [1,5,7] },
      { x: 0.367, y: 0.071, text: 'DNS', pos: [2] },
      { x: 0.357, y: 0.89, text: 'Protein', pos: [3] },
      { x: 0.267, y: 0.23, text: 'Transkription', pos: [6,4] },
      { x: 0.265, y: 0.679, text: 'Translation', pos: [1,5,7] },
      { x: 0.405, y: 0.228, text: 'im Zellkern', pos: [6,4] },
      { x: 0.417, y: 0.627, text: 'im Zellplasma', pos: [1,5,7] }
      
      => am Ribosom (1), Translation (5) und im Zellplasma (7) können die Plätze tauschen
      Transkription(4) und im Zellkern(6) auch.
      
5. Einrasten aktivieren
"snap": true

6. Ordner auf Github-Server kopieren
7. Index.html verlinken