Zum Hauptinhalt springen

Quiz Daten per URL-Parameter auf nächste Seite übergeben

Oliver Scharfenberger avatar
Verfasst von Oliver Scharfenberger
Vor über einem Jahr aktualisiert

In diesem Artikel lernst du wie du die Daten eines ausgefüllten Quiz zur nächstes Seite übergeben kannst, um dort mit diesen zu arbeiten. Dadurch kannst du zum Beispiel eine Terminbuchung vorausfüllen oder die Punktezahl eines Quiz für benutzerdefinierte Zwecke verwenden.

WICHTIG: Dies ist Code der bearbeitet und angepasst werden muss. Die eingestellten Weiterleitungen beim Quiz werden dadurch überschrieben.

Schritt 1: Klicke auf der Seite mit dem Quiz auf Website-Einstellungen, Eigener Code und dann auf Seiten Body Markup

Schritt 2: Kopiere folgenden Code in die Codeeingabe, die du bei Schritt 1 geöffnet hast.

<script>
const submitBtn = document.querySelector('a[data-role="submit"]');
if (submitBtn) {
submitBtn.addEventListener('click', function (e) {
e.preventDefault();
});
}

window.addEventListener(WebPlatform.Events.FORM_SUBMITTED, function (e) {
e.preventDefault();
const nameField = document.querySelector('input[data-name="Name"]');
const emailField = document.querySelector('input[data-name="E-Mail"]');
const radioFields = document.querySelectorAll('.quiz-select-wrapper ul li a input');

const name = nameField ? nameField.value : '';
const email = emailField ? emailField.value : '';
let values = '';
let score = 0;
let j = 1;
for(let i = 0; i < radioFields.length; i++) {
if(radioFields[i].checked) {
values += `step${j}=${radioFields[i].value}&`;
score += parseInt(radioFields[i].dataset.score);
j++;
}
}
window.location.href = `/dein-url?${values}name=${name}&email=${email}&score=${score}`;
});

window.load = function () {
const queryString = window.location.search;
const urlParams = new URLSearchParams(queryString);
console.log(urlParams);
}
</script>

Schritt 3: Ersetze /dein-url mit dem Url auf den nach einer Quizeinreichung weitergeleitet werden soll

Schritt 4: So kannst du die Daten auf der nächsten Seite verwenden

Notiz: Mit diesem Code werden alle Radio Felder sowie Name und Email inklusive der Punktezahl als Url-Parameter übergeben. Wenn zusätzliche Felder übergeben werden sollten, muss der Code angepasst werden.

Bei Fragen helfen wir dir gerne im LIVE-Chat weiter!

Happy Coding :)

Hat dies deine Frage beantwortet?