Feedback geven/ontvangen

Als gebruiker wil ik weten wat een docent van het spel vind.

De opdrachtgevers wilden graag feedback van de docenten over de spellen verzamelen. Hierdoor kunnen zij spellen aanpassen als deze niet duidelijk schijnen te zijn.

De vragen waar zij graag antwoord op willen zijn:

1. Was de omschrijving van het spel duidelijk?

2. Waren de regels duidelijk?

3. Vonden de kinderen het leuk?

Er is eerst een schets gemaakt om te bepalen welke onderdelen erin zouden komen.

Nadat deze schets gemaakt was, is er gezocht naar goede emoji's. Deze moesten namelijk in het ontwerp van de rest van de app passen.

Er is ervoor gekozen om het zo makkelijk mogelijk te maken voor de eindgebruiker. Het begint bij een simpele emoji waarin zij hun mening mee kunnen geven. Op het moment dat zij dit gedaan hebben, springt het beeld naar beneden met de vraag of zij hun keuze willen willen toelichten.

Willen zij dit niet, dan wordt hun keuze verstuurd. De opdrachtgevers hebben liever wat betere feedback, maar het is altijd beter dan niets.

Stel zij willen wel hun keuze toelichten, dan komt er een extra formulier tevoorschijn. Ook hier staan duidelijke vragen, waardoor de antwoorden van de gebruikers meer gericht zijn dan bij open vragen.

Daarnaast staat er ook weer bij dat het optioneel is, waardoor de stap nog kleine gemaakt wordt.

Qua code ziet het er als volgt uit:

<div class="confirm-container">
		<p>Bedankt, wil jij jouw keuze toelichten?</p>
		<div>
			<button class="yes-btn" on:click|preventDefault={() => toggleExplanation()}>Ja</button>
			<button class="no-btn" on:click|preventDefault={submitSmallForm} type="submit"
				>Nee, bedankt</button
			>
		</div>
	</div>

Zoals te zien is, zijn het beide buttons. De Nee, bedankt button is een submit button, terwijl er op de Ja button een preventDefault staat.

Op het moment dat een gebruiker op Nee, bedankt klikt, wordt de gebruiker bedankt en sluit het formulier zich.

Klikt de gebruiker op Ja dan klapt het andere menu open.

	function toggleExplanation() {
		const explanationForm = document.querySelector('.explanation-container');
		explanationForm.style.display = 'block';
		explanationForm.scrollIntoView({ behavior: 'smooth' });
	}

Later in de code wordt er gekeken of het lange formulier (long-form) of het korte formulier (short-form) verzonden wordt. Op basis van het formulier wordt de relevante data naar de server verstuurd. Het hele component is hier te vinden.

Voor de server waren er twee mogelijkheden:

1. Er wordt in het account gedeelte een plek toegevoegd waar een lijst met feedback staat. Op het moment dat de gebruiker een admin is, wordt dit gedeelte zichtbaar.

2. De data wordt middels een POST request naar Strapi gestuurd.

De voorkeur ging uit naar keuze 1, maar om wille van de tijd is er voor optie twee gekozen.

Het is niet de ideale manier, aangezien Strapi een Content Management System (CMS) is. Een CMS is bedoeld om content te beheren, terwijl de reviews alleen opgeslagen worden.

Toch was het de snelste manier om het te doen en daarom is er hier voor gekozen. Het is en blijft een prototype en daarom is dit niet de ideale optie. Zeker niet als je, je bedenkt dat er geen authenticatie op het POST request zit en dus iedereen iets naar de database zou kunnen posten.

Het onderdeel waar de input wordt gepost, ziet er als volgt uit:

	async function sendResultsToDB(formResults) {
		let result = {
			...
		};
		const isShortForm = formResults.type === 'short';
		if (isShortForm) {
			...
		} else {
			...
		}
		const response = await fetch(`${VITE_STRAPI_API_URL}/reviews`, {
			method: 'POST',
			body: JSON.stringify(result),
			headers: {
				'Content-Type': 'application/json'
			}
		});
		return response.json();
	}

De parameter formResults wordt in de methodes erboven gedefineerd.

In het CMS ziet het er als volgt uit:

Om de admins te helpen, is er voor gekozen om de velden te disabelen. Er kan dus enkel gekeken worden naar de feedback die gegeven is.

Het is niet de meest ideale manier, maar op deze manier is het voor de opdrachtgevers mogelijk om feedback te verzamelen van de gebruikers.