Ask a Question

Wörter "highlighten" in einem Fließtext

0 votes
in SoSci Survey (dt.) by s109993 (12.0k points)

Hallo,

ich versuche eine Aufgabe für Schüler zu erstellen, diese existiert schon als Konzept, aber ich bin mir nicht sicher ob es mit SoSci zu realisieren ist.

Es soll ein Fließtext erscheinen. Die Schüler hat 10 Minuten um soweit zu lesen wie möglich (ein Timer sollte hier kein Problem sein).
Desweiteren soll der Schüler das letzte Wort markieren, damit es ersichtlich ist, bis wohin er gekommen ist.

Hier liegt mein Problem. Ich denke, für eine Realisierung müsste der gesamte Text mit JS hinterlegt werden.

Eine Lösung, die ich Online gefunden habe, macht dies möglich. Allerdings würde ich hier gerne ihre Meinung Wissen- auch ob es eventuell eine andere Möglichkeit gibt, die schon in SoSci implementiert ist.

<!DOCTYPE html>
<html>
<head>
<script src="https://code.jquery.com/jquery-git.js"></script>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>Click a word in the paragraph and highlight it.</title>
</head>
<body>
<p>
This domain is established to be used for illustrative examples in documents. You may use this domain in examples without prior coordination or asking for permission.
</p>
</body>
</html>

var words = $( "p" ).first().text().split( /\s+/ );
var text = words.join( "</span> <span>" );
$( "p" ).first().html( "<span>" + text + "</span>" );
$( "span" ).on( "click", function() {
$( this ).css( "background-color", "red" );
});

Viele Grüße

1 Answer

+1 vote
by SoSci Survey (327k points)

In einigen anderen Studien wurde dafür der Fragetyp "grafische Positionierung" verwendet mit dem Text als Bild.

Der von Ihnen gespostete JavaScript-Code ist nicht ganz schlecht. Er zerlegt den Texte zunächst in Wörter und packt diese in einzelne <span>-Knoten. Dies ist unsichtbar, erlaubt aber die Adressierung einzelner Wörter mittels JavaScript.

Anschließend wird jedes <span>-Element mit einem sog. Event-Handler versehen, welcher die Hintergrundfarbe ändert, wenn man daruf klickt. Keine schlechte Lösung.

Statt dem 

<script src="https://code.jquery.com/jquery-git.js"></script>

Verwenden Sie den folgenden PHP-(!)-Code:

library('jQuery');

Dann wird jQuery direkt von SoSci Survey eingebunden ohne Datenschutz-Probleme mit dem Abruf einer Datei von fremden Servern.

Und statt das erstbeste <p>-Element auf der Seite zu nehmen (mit $( "p" ).first()) werden Sie vermutlich einen Textbaustein (HTML-Code) mit <div>-Element erstellen, diesem Element mittels id einen Namen geben und dieses dann adressieren.

Und natürlich werden Sie auch noch eine interne Variable benötigen, in welcher Sie die Auswahl des Nutzers speichern, also die Nummer des Wortes im Text.

Weiterhin möchten Sie vermutlich sicherstellen, dass immer nur ein Wort gewählt werden kann? Auch das müssten Sie noch per JavaScript abbilden.

Ja, ich gebe zu, das ist nicht vollkommen trivial - selbst mit meiner langjährigen Programmiererfahrung würde ich vermutlich ein Stündchen benötigen das zu implementieren. Aber es ist eine Sonderlösung und ich sehe nicht, dass das kurzfristig in SoSci Survey als Standard-Modul verfügbar sein wird - insofern werden Sie sich durch ein wenig Programmcode beißen müssen.

Bestenfalls kann ich ein Kompensationsgeschäft anbieten: Wenn Sie ein paar Kapitelchen der Anleitung ins englische Übersetzen (dank deepl.com ist die Hauptarbeit das Einpflegen der Formatierung) bzw. die englischen Übersetzungen aktualisieren möchten, dann kann ich im Gegenzug in der dadurch frei gewordenen Zeit eine Vorlage für diesen Aufgaben-Typ implementieren.

by s109993 (12.0k points)
Danke für das Angebot. Wenn das Konzept finalisiert wurde, werde ich mich ggf. dann nochmal per Email an Sie wenden.

Beste Grüße
by s109993 (12.0k points)
edited by s109993
Vielleicht kann ich Sie noch einmal kurz etwas dazu Fragen:

Folgender Code würde mir erlauben nur ein Wort zu "highlighten" und dieses Wort in einer Variable abspeichern.

<script>
var words = $(document.getElementById("test")).first().text().split(/\s+/);
var text = words.join("</span> <span>");
$(document.getElementById("test")).first().html("<span>" + text + "</span>");
let highlighted;
$("span").on("click", function() {
  $(highlighted).css("background-color", "");
  $(this).css("background-color", "CornflowerBlue ");
  highlighted = this;
});
</script>

Mein Problem ist nun, wie bekomme ich eine JS Variable in meine interne php Variable. Mit Ajax ist es wohl möglich die js Variable in der URL abzuspeichern und dann mit $_GET (SoSci: readGET() ) in meine php Variable  zu legen. Ist das theoretisch auch in SoSci möglich, oder begebe ich mich hier in "unbekannte" Gebiete.

Es wäre übrigens schön, auch in Kommentaren Codes zu formatieren zu können :)
by SoSci Survey (327k points)
> wie bekomme ich eine JS Variable in meine interne php Variable

Das ist zum Glück ganz einfach:
https://www.soscisurvey.de/help/doku.php/de:create:questions:internal#interne_variablen_und_javascript

> Es wäre übrigens schön, auch in Kommentaren Codes zu formatieren zu können :)

Ja ... aber dann würden die Kommentarschlangen doch recht lang werden. Und soweit ich weiß, unterstützt das verwendete System Question2Answer Code nur in Fragen und Antworten. Und selbst da finden leider 95% der Nutzer nicht den Knopf zum Formatieren als Code ;)

Willkommen im Online-Support von SoSci Survey.

Hier bekommen Sie schnelle und fundierte Antworten von anderen Projektleitern und direkt von SoSci Survey.

→ Eine Frage stellen

Welcome to the SoSci Survey online support.

Simply ask a question to quickly get answers from other professionals, and directly from SoSci Survey.

→ Ask a Question

Categories

Snow Theme by Q2A Market
Powered by Question2Answer
...