✨ functionality to skip question or end survey
Co-authored-by: Sindre Kjelsrud <kjelsrudsindre@gmail.com>
This commit is contained in:
parent
cf6cede349
commit
c1721e5e8e
4 changed files with 49 additions and 19 deletions
|
@ -6,6 +6,8 @@
|
|||
|
||||
export let questionNum:number
|
||||
export let answeredAll:boolean
|
||||
export let answer1ID:number
|
||||
export let answer2ID:number
|
||||
|
||||
const gotoNextPage = async (questionNum: number) => {
|
||||
goto(`${questionNum + 1}`)
|
||||
|
@ -15,6 +17,24 @@
|
|||
goto(`${questionNum - 1}`)
|
||||
}
|
||||
|
||||
const skipQuestion = async (questionNum: number) => {
|
||||
let allFormAnswers:string | null = localStorage.getItem("allFormAnswers")
|
||||
if (allFormAnswers) {
|
||||
const convertedAnswers:[] = JSON.parse(allFormAnswers)
|
||||
let result = convertedAnswers.filter((item) => item[0] != answer1ID && item[0] != answer2ID)
|
||||
const localStorageResult = JSON.stringify(result)
|
||||
localStorage.setItem("allFormAnswers", localStorageResult)
|
||||
|
||||
if (questionNum != 0 && questionNum % 4 == 0) {
|
||||
handleFormSubmit()
|
||||
} else {
|
||||
goto(`${questionNum + 1}`)
|
||||
}
|
||||
} else {
|
||||
goto(`${questionNum + 1}`)
|
||||
}
|
||||
}
|
||||
|
||||
const handleFormSubmit = async () => {
|
||||
let allFormAnswers:string | null = localStorage.getItem("allFormAnswers")
|
||||
let respondentID:string | null = localStorage.getItem("RespondentId")
|
||||
|
@ -27,7 +47,8 @@
|
|||
|
||||
</script>
|
||||
|
||||
<div class="flex justify-center items-center gap-8 pb-4 mt-4 md:mb-5">
|
||||
<div class="flex flex-col gap-8 justify-around items-center pb-6 md:mb-5">
|
||||
<div class="flex gap-8">
|
||||
<button disabled={questionNum == 0} class={`flex items-center gap-2 text-primary font-semibold ${questionNum == 0 && "opacity-50"}`} on:click={() => gotoPrevPage(questionNum)}>
|
||||
<ArrowChevron width=16 direction="left"/>
|
||||
Forrige spørsmål
|
||||
|
@ -41,3 +62,12 @@
|
|||
<ArrowChevron width=16 direction="right"/>
|
||||
</button>
|
||||
</div>
|
||||
<div class="flex gap-8">
|
||||
<button on:click={() => skipQuestion(questionNum)} class="border-2 border-primary text-primary rounded-3xl hover:bg-primary hover:text-bg px-3 py-2">
|
||||
Ønsker ikke vurdere dette spørsmålet
|
||||
</button>
|
||||
<button on:click={handleFormSubmit} disabled={(questionNum != 0 && questionNum % 4 == 0) || !answeredAll} class={`border-2 border-primary bg-primary text-bg rounded-3xl px-3 py-2 ${(questionNum != 0 && questionNum % 4 == 0) || !answeredAll && "opacity-50"} ${questionNum != 0 && questionNum % 4 == 0 && "opacity-50"} ${questionNum % 4 == 0 && questionNum != 0 && answeredAll && "hidden"}`}>
|
||||
Avslutt undersøkelsen og send inn svar
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
|
@ -5,7 +5,7 @@
|
|||
export let questionNum:number
|
||||
</script>
|
||||
|
||||
<div class="flex justify-center items-start md:items-center md:h-auto md:mt-16">
|
||||
<div class="flex justify-center items-start md:items-center md:h-auto md:mt-8">
|
||||
<div class="flex justify-center">
|
||||
<div class="flex flex-grow flex-col md:flex-row md:justify-center items-center md:w-4/5 gap-4">
|
||||
<h1 class="text-xl text-primary font-bold text-center">Spørsmål {Number(questionNum) + 1}</h1>
|
||||
|
|
|
@ -17,7 +17,7 @@
|
|||
|
||||
<div class="flex flex-col justify-between items-center h-full">
|
||||
<div class="flex flex-col gap-14 md:gap-8 h-full mt-8">
|
||||
<div class="flex flex-col gap-4 md:px-96 items-center">
|
||||
<div class="flex flex-col gap-4 lg:px-60 items-center">
|
||||
<h1 class="text-3xl text-primary font-bold">Takk for at du tok deg tid!</h1>
|
||||
<p>Tusen takk for hjelpen i denne undersøkelsen! Vi setter stor pris på det og håper du får en fin dag videre.</p>
|
||||
<p>Har du tid så setter vi veldig pris på om du skrevet en liten tilbakemelding til oss i tekstfeltet under:</p>
|
||||
|
|
|
@ -70,9 +70,9 @@
|
|||
});
|
||||
</script>
|
||||
|
||||
<div class="flex flex-col h-full md:h-screen gap-10">
|
||||
<div class="flex flex-col h-full md:h-screen">
|
||||
<FormHeader questionNum={questionNumber} formQuestion={formQuestion}/>
|
||||
<div class="flex flex-col md:flex-row h-full justify-between gap-12">
|
||||
<div class="flex flex-col md:flex-row h-full justify-between mt-6 mb-10 gap-12">
|
||||
{#key questionNumber}
|
||||
<div class="flex-1">
|
||||
<AnswerBox on:update={(e) => question1Answered = e.detail} answerNum={1} answerText={questionAnswer1Text} answerID={questionAnswer1ID}/>
|
||||
|
@ -83,6 +83,6 @@
|
|||
{/key}
|
||||
</div>
|
||||
{#key questionNumber}
|
||||
<Footer answeredAll={question1Answered && question2Answered} questionNum={Number(questionNumber)}/>
|
||||
<Footer answeredAll={question1Answered && question2Answered} answer1ID={questionAnswer1ID} answer2ID={questionAnswer2ID} questionNum={Number(questionNumber)}/>
|
||||
{/key}
|
||||
</div>
|
Reference in a new issue