Open lisavanmansom opened 1 week ago
lisavanmansom
commented
1 week ago Het component is een vragenlijst (form). De huidige schets komt vanuit de opdrachtgever. Momenteel is het per vraag in een one-pager layout, het is beter om het geheel op 1 pagina te maken en daarna code te splitten.
Mijn page bestaat uit 3 componenten:
lisavanmansom
commented
1 week ago morphological chart
Ik heb de opties van de form verkent d.m.v. een morphological chart. De uitkomst is: radio / _blank / post.
Wij hebben een ontwerp ontvangen van de opdrachtgever, momenteel is het per vraag in een one-pager layout, het is beter om het geheel op 1 pagina te maken en daarna code te splitten. Door dit te doen is het makkelijker om het PE / toegankelijk te maken.
Qua responsive is er niet echt verschil met desktop en mobile. Het design is een lijst met vragen wat gecentreerd is in het midden van het scherm.
Ik ga het eerst als form in geheel maken. Als enhancement wil ik 1 vraag hebben op de page. Om zoiets als resultaat te krijgen heb je JS nodig, als de JS uitstaat zou je het gehele form te zien moeten krijgen.
Om de performance score hoog te houden wil ik het eerst coderen zonder animaties. In de achtergrond zou ik wel een rustige bewegend element willen hebben om de user experience te verhogen. Dit verlaagt wel de performance, om die reden ga ik dit later toevoegen zodat het eenvoudig blijft om de componenten en de rest te testen en verbeteren op performance
Ik heb het design getest op kleurcontrasten. De input / radio heeft een border die niet in het juiste kleurcontrast staat. Aangezien wit vaker terugkomt is dat een passende kleur die ik ga gebruiken ipv deze grijze kleur.
In de verbeterde versie heb ik de border lichter gemaakt. Om het verschil te zien heb ik de onderste 2 niet aangepast.
Door verschillende states te gebruiken ga ik feedback geven aan de gebruiker. Momenteel is de hover / active state het belangrijkste.
lisavanmansom
commented
3 days ago Ik heb van de input een een aparte component gemaakt. De input heeft een name, value en een bindGroup, dit wordt ingeladen vanuit de form component waar deze data in een array staat. De input wordt ingeladen in het fieldset component. Ik maak gebruik van $props() wat refereert naar properties, dit zit in Svelte5.
<script>
let {name, value, labelText, bindGroup, ...others} = $props();
</script>
<label>
<input type="radio" name={name} value={value} bind:group={bindGroup} />
{labelText}
</label>In het Fieldset component importeer ik het input-component. In dit component maak ik ook gebruik van $props() en wordt de props-data ingeladen vanuit het form-component.
<script>
import QuestionOption from './question-option.svelte';
let {name, value, labelText,selectedOption, options, legend, ...others} = $props();
</script>
<fieldset>
<legend>{legend}</legend>
{#each options as option}
<!-- Question option / input component-->
<QuestionOption
name={name}
value={option.value}
labelText={option.labelText}
bindGroup={selectedOption}
/>
{/each}
</fieldset>In het form element wordt de fieldset-component ingeladen en staat de 'data' van het gehele form wat wordt ingeladen in andere componenten en in dit component. De form heeft een POST en een submit waardoor je geredirect kan worden naar een andere page based on de gegeven antwoorden.
<script>
import QuestionSet from './question-set.svelte';
// content form
let questions = [{
legend: "Hoe denk je over het verlies?",
name: "question1",
options: [
{value: "f1-i-1", labelText: "Ik voel intens verdriet of pijn wanneer ik aan het verlies denk."},
{value: "f1-i-2", labelText: "Het voelt nog steeds onwerkelijk, alsof het niet echt is gebeurd."},
{value: "f1-i-3", labelText: "Ik probeer manieren te vinden om mijn dagelijkse leven aan te passen."},
{value: "f1-i-4", labelText: "Ik begin de persoon een plek te geven in mijn herinneringen en probeer door te gaan."}
]
},
{
legend: "Hoe vaak ervaar je emotionele pijn gerelateerd aan het verlies?",
name: "question2",
options: [
{ value: "f2-i-1", labelText: "Vrijwel constant voel ik verdriet en rouw."},
{ value: "f2-i-2", labelText: "Soms voel ik pijn, maar ik probeer verder te gaan."},
{ value: "f2-i-3", labelText: "Het wordt minder intens en ik vind troost in herinneringen."},
{ value: "f2-i-4", labelText: "Ik voel geen sterke emoties over het verlies, meer verwarring."}
]
},
{
legend: "Hoe kijk je naar een toekomst zonder je dierbare?",
name: "question3",
options: [
{ value: "f3-i-1", labelText: "Ik kan me een toekomst zonder hen niet voorstellen."},
{ value: "f3-i-2", labelText: "Ik probeer nieuwe routines te ontwikkelen zonder hen."},
{ value: "f3-i-3", labelText: "Ik begin hoop te zien voor de toekomst en herinner me hen met liefde."},
{ value: "f3-i-4", labelText: "Ik voel me overweldigd door het verdriet en kan niet aan de toekomst denken."}
]
}]
</script>
<!-- form component-->
<form method="POST" action="?/submit"> <!-- form submission / native-->
{#each questions as question}
<!-- QuestionSet / fieldsets-->
<QuestionSet
legend={question.legend}
name={question.name}
options={question.options}
/>
{/each}
<button type="submit">Submit</button>
</form>Via een page.server.js wordt je geredirect naar een andere pagina gebaseerd op de gegeven antwoorden in het form. Deze code is nog niet helemaal geoptimaliseerd maar het is momenteel wel werkend. Ik heb momenteel 4 pagina's waarnaar je geredirect kan worden maar ik wil dat veranderen naar 1 aangezien het dezelfde pagina is alleen dan met andere inhoud.
import { redirect } from '@sveltejs/kit';
export const actions = {
submit: async ({ request }) => {
const formData = await request.formData();
const selectedAnswers = {
question1: formData.get('question1'),
question2: formData.get('question2'),
question3: formData.get('question3'),
};
// Via selectedAnswers is the result calculated and redirection
if (selectedAnswers.question1 === 'f1-i-1' && selectedAnswers.question2 === 'f2-i-1') {
throw redirect(303, '/form-redirect/redirect-rt-1');
} else if (selectedAnswers.question1 === 'f1-i-4' && selectedAnswers.question3 === 'f3-i-3') {
throw redirect(303, '/form-redirect/redirect-rt-2');
} else if (selectedAnswers.question2 === 'f2-i-3') {
throw redirect(303, '/form-redirect/redirect-rt-3');
} else {
throw redirect(303, '/form-redirect/redirect-rt-4');
}
}
};Om het component vaker te kunnen gebruiken heb ik de onderstaande code gebruikt.
<script>
import { page } from '$app/stores';
export let pageStyle = 'default';
</script>
<img
src="/gradients/Meshgrad-pink.png"
alt=""
width="100" height="100"
class={`blurred-image ${pageStyle}`}/>
<style>
<!-- dynamic class -->
.blurred-image.form-page {
transform: scale(2);
}
</style>Door een pageStyle="" toe te voegen komt die class van het component alleen op deze pagina.
<div aria-hidden="true">
<BlurgradPink pageStyle="form-page" />
</div>Voordat ik verder ga met CSS test doe ik eerst de gebruikelijke testen zodat ik eenvoudig de voortgang van test-uitslagen bij kan houden.
Om te checken of het werkt zonder JS heb ik het form ingevuld en gesubmit met JS uit. Met JS uit werkt het submitten nogsteeds.
Tijdens de lighthouse test kwam er een 1 accessibility error naar voren, dit wordt opgelost wanneer er een styling wordt toegevoegd.
Gepersonaliseerd programma d.m.v vragenlijst / page
De vragenlijst pagina wordt gebouwd d.m.v atomic design.
Component: Ontwerp en bouw voor de opdrachtgever een robuust, goed werkend component, waarin de belangen van de eindgebruiker centraal staan.
Takenlijst:
Gekoppelde issues aan deze taak:
Definition of done