localStorage ersetzen mit SERIAL

Question

Ich habe einen Date Picker erstellt, bei welchem die Daten bei mehrmaligen einloggen gespeichert werden mit "localStorage" (JS). Das funktioniert ganz gut, ist aber etwas risikoreich, falls ein Teilnehmer ein anderes Endgerät benutzt bzw. einen anderen Browser. Da ich sowieso mit einem Teilnahmecode arbeiten werde, würde ich gerne localstorage mit dem equivalent ersetzen, welches die Daten über den Teilnahme code speichert. Gibt es da etwas? Die angezeigten Daten könnte ich ggf. über die interen Variablen anzeigen lassen (geht das auf der gleichen Seite, da php?). Aber wie würde das mit dem Speichern der farblich hinterlegten Daten im Kalender funktionieren?

Damit es ein bisschen besser verständlich ist, hier der Pre-Test Link direkt zur Seite: https://ofb.iea-hamburg.de/test111/?act=4ZXfm1iyiW3FlkTdub8aexN2

EDIT BILD:

Danke und viele Grüße

Answer 1

Sie können bei internen Variablen einstellen, dass der Inhalt "im Hintergrund übertragen" wird. Diese Optionen können Sie auswählen, wenn Sie eine interne Variable (also quasi das Item) links in der Navigation anklicken.

Ein JavaScript schreibt die Daten dann nach jeder Änderung auf den Server in den Datensatz.

Geht das in die Richtung, was Sie suchen?

Comments

>  Für die Nutzer sieht es dann nur so aus, als würde die Seite aktualisiert werde.

Wenn Sie auf der folgenden Seite ein repeatPage() verwenden statt dem goToPage(), könnten Sie eine Meldung "Wurde gespeichert" anzeigen - oder eben nicht, wenn das Interview erneut aufgerufen wird.

> dass die gespeicherten Werte (Daten) bei einem erneuten Login mit einer Serial in einem anderen Engerät/Browser nicht mehr angezeigt werden.

Lassen Sie sich bitte mal anzeigen, ob das richtige Interview fortgesetzt wird und ob die Daten vorliegen:

debug(caseNumber());
debug(value('IV01_01'));

Wenn das Interview nicht fortgesetzt wird, würde ich auf die Einstellungen zum Grenzwert unter "Fragebogen zusammenstellen" -> "Einstellungen" tippen.

Wenn die Daten vorliegen, der Kalender sie aber nicht anzeigt, dann wäre meine Vermutung, dass beim Einlesen aus dem <input> im JavaScript etwas nicht passt.

---

> Wenn Sie auf der folgenden Seite ein repeatPage() verwenden statt dem goToPage(), könnten Sie eine Meldung "Wurde gespeichert" anzeigen - oder eben nicht, wenn das Interview erneut aufgerufen wird.

Das mache ich über alert() in JS, aber könnte das auch noch entsprechend umändern.


>Wenn die Daten vorliegen, der Kalender sie aber nicht anzeigt, dann wäre meine Vermutung, dass beim Einlesen aus dem <input> im JavaScript etwas nicht passt.

Das Interview wird nicht fortgesetzt, sondern es wird immer eine neue Datenspalte erstellt. Ich versuche morgen noch ein paar Dinge. Da dieser Kalender bei uns fü die Testleiter Orga benutzt werden soll und dementsprechen für viele Studien im Einsatz sein wird noch eine Frage: Falls ich die Anpassung an SoSci nicht hinbekommen sollte, wäre es möglich den Arbeitsauftrag an Sie auf Rechnung abzugeben?

---

Vermutlich müssen Sie nur in den Fragebogen-Einstellungen festlegen, dass das Interview unabhängig von MISSING immer fortgesetzt werden soll. Aber ja, langjährigen Kunden greife ich bei Bedarf natürlich auch mal unter die Arme.

---

Den Teil mit der Interview Fortsetzung läuft inzwischen, das war auch nicht das Hauptproblem :)  ich habe oben in die Frage ein Screenshot gesetzt. Die ausgewählten und dann gespeicherten Daten werden unterhalb desKalenders angezeigt. Wenn ich jetzt den kalender mit einem anderen Endgerät öffne (aber mit der gleichen SERIAL), dann werden die ausgewählten Daten nicht mehr angezeigt, da diese eben über localstorage gespeichert wurden und nicht über die URL. Das ist für mich momentan der Knackpunkt.

---

So... ich habe es wohl doch hinbekommen. Ehrlicherweise mit Hilfe von Chatgpt, aber es funktioniert so wie es soll und ich habe bisher keine Fehler finden können. Das muss jetzt von meinen Kolleg:innen noch ausführlich getestet werden. Danke für Ihre Tipps und Unterstützung.

  // Function to save selected dates to SoSci placeholders
    function saveSelectedDates() {
        try {
            if (allSelectedDates.length > variables.length) {
                throw new Error('Not enough variables to store all selected dates.');
            }

            for (let i = 0; i < variables.length; i++) {
                const element = document.getElementById(variables[i]);

                if (i < allSelectedDates.length) {
                    const range = allSelectedDates[i];
                    const startFormatted = formatDate(range.start);
                    const endFormatted = range.end ? formatDate(range.end) : '';
                    element.value = endFormatted ? `${startFormatted} - ${endFormatted}` : startFormatted;
                } else {
                    element.value = '';
                }
            }

            console.log('Saved dates:', allSelectedDates);
            return true; // Return true on success
        } catch (error) {
            console.error('Error saving dates:', error);
            return false; // Return false on failure
        }
    }

    // Function to load selected dates from SoSci placeholders
    function loadSelectedDates() {
        allSelectedDates = variables
            .map(variable => {
                const element = document.getElementById(variable);
                if (element && element.value) {
                    const [startStr, endStr] = element.value.split(' - ');
                    return {
                        start: new Date(startStr.split('.').reverse().join('-')),
                        end: endStr ? new Date(endStr.split('.').reverse().join('-')) : null
                    };
                }
                return null;
            })
            .filter(range => range !== null);

        displaySelectedDates();
        updateCalendar();
    }