Merge branch '148-survey-questions-other-languages-known-multiselect' into 'dev'

Resolve "survey questions: other languages known (multiselect?)"

Closes #148

See merge request !25

backend/app/models.py

@@ -269,6 +269,7 @@ class SurveyResponseInfo(Base):
     birthyear = Column(Integer)
     gender = Column(String)
     primary_language = Column(String)
+    other_language = Column(String)
     education = Column(String)
 
 

backend/app/schemas.py

@@ -307,6 +307,7 @@ class SurveyResponseInfoCreate(BaseModel):
     birthyear: int
     gender: str
     primary_language: str
+    other_language: str
     education: str
 
 
@@ -316,6 +317,7 @@ class SurveyResponseInfo(BaseModel):
     birthyear: int
     gender: str
     primary_language: str
+    other_language: str
     education: str
 
 

frontend/src/lang/en.json

@@ -186,6 +186,8 @@
 			"Master": "Master's degree or above"
 		},
 		"example": "Example",
+		"otherLanguage": "Is there any other language you are relatively fluent in?",
+		"otherLanguageNote": "(If you are fluent in multiple other languages, beyond your target language and your first language, please select the one closest to your target language or that seems to help you the most in learning your target language.)",
 		"consent": {
 			"intro": "You are invited to participate in a scientific study to design, validate and apply vocabulary tests.",
 			"ok": "I agree to participate in the study as described above.",

frontend/src/lang/fr.json

@@ -274,7 +274,9 @@
 			"Bachelor": "Bachelier",
 			"Master": "Master ou diplôme supérieur"
 		},
-		"example": "Exemple"
+		"example": "Exemple",
+		"otherLanguage": "Is there any other language you are relatively fluent in?",
+		"otherLanguageNote": "(If you are fluent in multiple other languages, beyond your target language and your first language, please select the one closest to your target language or that seems to help you the most in learning your target language.)"
 	},
 	"users": {
 		"nickname": "Nom",

frontend/src/lib/api/survey.ts

@@ -52,6 +52,7 @@ export async function sendSurveyResponseInfoAPI(
 	birthyear: number,
 	gender: string,
 	primary_language: string,
+	other_language: string,
 	education: string
 ) {
 	const response = await fetch(`/api/surveys/info/${survey_id}`, {
@@ -62,6 +63,7 @@ export async function sendSurveyResponseInfoAPI(
 			birthyear,
 			gender,
 			primary_language,
+			other_language,
 			education
 		})
 	});

frontend/src/routes/tests/[id]/+page.svelte

@@ -42,13 +42,13 @@
 	let questionsRandomized = $derived(getSortedQuestions(currentGroup));
 	let currentQuestionId = $state(0);
 	let currentQuestion = $derived(questionsRandomized[currentQuestionId]);
-	let type = $derived(currentQuestion.question.split(':')[0]);
-	let value = $derived(currentQuestion.question.split(':').slice(1).join(':'));
+	let type = $derived(currentQuestion?.question.split(':')[0]);
+	let value = $derived(currentQuestion?.question.split(':').slice(1).join(':'));
 	let gaps = $derived(type === 'gap' ? gapParts(currentQuestion.question) : null);
 	let soundPlayer: HTMLAudioElement;
 	let displayQuestionOptions: string[] = $derived(
 		(() => {
-			let d = [...(currentQuestion.options ?? [])];
+			let d = [...(currentQuestion?.options ?? [])];
 			shuffle(d);
 			return d;
 		})()
@@ -194,7 +194,7 @@
 	async function selectAnswer(selection: string, option: string) {
 		endSurveyAnswers[selection] = option;
 		subStep += 1;
-		if (subStep == 4) {
+		if (subStep == 5) {
 			await sendSurveyResponseInfoAPI(
 				fetch,
 				survey.id,
@@ -202,6 +202,7 @@
 				endSurveyAnswers.birthYear,
 				endSurveyAnswers.gender,
 				endSurveyAnswers.primaryLanguage,
+				endSurveyAnswers.other_language,
 				endSurveyAnswers.education
 			);
 			step += 1;
@@ -406,6 +407,23 @@
 				></Dropdown>
 			</div>
 		{:else if subStep === 3}
+			<div class="mx-auto mt-16 text-center px-4">
+				<p class="text-center font-bold py-4 px-6 m-auto">{$t('surveys.otherLanguage')}</p>
+				<p class="mb-6 text-sm text-gray-600 text-center">{$t('surveys.otherLanguageNote')}</p>
+				<Dropdown
+					values={[
+						{ value: 'none', display: '/' },
+						...Object.entries(config.PRIMARY_LANGUAGE).map(([code, name]) => ({
+							value: code,
+							display: name
+						}))
+					]}
+					bind:option={selectedOption}
+					placeholder={$t('surveys.otherLanguage')}
+					funct={() => selectAnswer('other_language', selectedOption)}
+				></Dropdown>
+			</div>
+		{:else if subStep === 4}
 			<div class="mx-auto mt-16 text-center px-4">
 				<p class="text-center font-bold py-4 px-6 m-auto">{$t('surveys.education.title')}</p>
 				<Dropdown
@@ -426,7 +444,7 @@
 	{:else}
 		{(step += 1)}
 	{/if}
-{:else if step == 4}
+{:else if step === 4}
 	<div class="mx-auto mt-16 text-center">
 		<h1>{$t('surveys.complete')}</h1>
 		{#if finalScore !== null}