diff --git a/frontend/src/lib/i18n/locales/en.json b/frontend/src/lib/i18n/locales/en.json
index 6d317d7..79628c0 100644
--- a/frontend/src/lib/i18n/locales/en.json
+++ b/frontend/src/lib/i18n/locales/en.json
@@ -154,7 +154,9 @@
         "download": "Download",
         "continue": "Continue",
         "backup_code": "Backup-code",
-        "totp": "Totp"
+        "totp": "Totp",
+        "text": "Text",
+        "order": "order"
     },
     "editor": {
         "time_in_seconds": "Time in seconds",
diff --git a/frontend/src/lib/practice/question.svelte b/frontend/src/lib/practice/question.svelte
index 8fa3749..1312542 100644
--- a/frontend/src/lib/practice/question.svelte
+++ b/frontend/src/lib/practice/question.svelte
@@ -3,11 +3,11 @@
   - License, v. 2.0. If a copy of the MPL was not distributed with this
   - file, You can obtain one at https://mozilla.org/MPL/2.0/.
   -->
-<script lang='ts'>
-	import type { Question } from '$lib/quiz_types';
+<script lang="ts">
+	import type { OrderQuizAnswer, Question } from '$lib/quiz_types';
+	import { QuizQuestionType } from '$lib/quiz_types';
 	import { fly } from 'svelte/transition';
 	import { getLocalization } from '$lib/i18n';
-	import { QuizQuestionType } from '$lib/quiz_types';
 	import Spinner from '$lib/Spinner.svelte';
 	import { flip } from 'svelte/animate';
 
@@ -43,6 +43,13 @@
 	let text_input;
 	timer(question.time);
 
+	function shuffleArray(a) {
+		for (let i = a.length - 1; i > 0; i--) {
+			const j = Math.floor(Math.random() * (i + 1));
+			[a[i], a[j]] = [a[j], a[i]];
+		}
+		return a;
+	}
 
 	const swapArrayElements = (arr, a: number, b: number) => {
 		let _arr = [...arr];
@@ -51,20 +58,46 @@
 		_arr[b] = temp;
 		return _arr;
 	};
+
+	let original_order: OrderQuizAnswer[] = [];
+
+	if (question.type === QuizQuestionType.ORDER) {
+		for (let i = 0; i < question.answers.length; i++) {
+			question.answers[i] = { answer: question.answers[i].answer, id: i };
+		}
+		original_order = [...question.answers];
+		console.log(original_order);
+		shuffleArray(question.answers);
+	}
+
+	let order_corrected = false;
+	const select_complex_answer = () => {
+		/*		const correct_order_ids = []
+				for (const e of original_order) {
+					correct_order_ids.push(e.id)
+				}
+				const user_set_ids = []
+				for (const e of answer) {
+					correct_order_ids.push(e.id)
+				}*/
+		question.answers = original_order;
+		order_corrected = true;
+		timer_res = '0';
+	};
 </script>
 
-<div class='w-full px-6 lg:px-20 h-[80vh] absolute' in:fly={{ x: 100 }} out:fly={{ x: -100 }}>
-	<h1 class='text-3xl text-center'>{@html question.question}</h1>
+<div class="w-full px-6 lg:px-20 h-[80vh] absolute" in:fly={{ x: 100 }} out:fly={{ x: -100 }}>
+	<h1 class="text-3xl text-center">{@html question.question}</h1>
 	{#if question.image !== null}
 		<div>
 			<img
 				src={question.image}
-				class='max-h-[40vh] object-cover mx-auto mb-8 w-auto'
-				alt='Content for Question'
+				class="max-h-[40vh] object-cover mx-auto mb-8 w-auto"
+				alt="Content for Question"
 			/>
 		</div>
 	{/if}
-	<p class='text-center'>{timer_res}</p>
+	<p class="text-center">{timer_res}</p>
 	{#if question.type === QuizQuestionType.ABCD}
 		{#if show_results}
 			<div>
@@ -75,8 +108,8 @@
 						class:bg-red-500={!question.answers[i].right}
 						class:text-xl={i === selected_answer}
 						class:underline={i === selected_answer}
-						class='p-2 rounded-lg flex justify-center w-full transition my-5 text-black'
-					>{answer.answer}</button
+						class="p-2 rounded-lg flex justify-center w-full transition my-5 text-black"
+						>{answer.answer}</button
 					>
 				{/each}
 			</div>
@@ -85,7 +118,7 @@
 				{#each question.answers as answer, i}
 					<button
 						disabled={selected_answer !== undefined || timer_res === '0'}
-						class='p-2 rounded-lg flex justify-center w-full transition bg-amber-300 my-5 disabled:grayscale text-black'
+						class="p-2 rounded-lg flex justify-center w-full transition bg-amber-300 my-5 disabled:grayscale text-black"
 						on:click={() => {
 							selected_answer = i;
 							timer_res = '0';
@@ -94,7 +127,7 @@
 				{/each}
 				{#if timer_res === '0'}
 					<button
-						class='bg-orange-500 p-2 rounded-lg flex justify-center w-full transition my-5 text-black'
+						class="bg-orange-500 p-2 rounded-lg flex justify-center w-full transition my-5 text-black"
 						on:click={() => {
 							show_results = true;
 						}}>{$t('admin_page.get_results')}</button
@@ -107,7 +140,7 @@
 			{#await import('svelte-range-slider-pips')}
 				<Spinner />
 			{:then c}
-				<div class='grayscale pointer-events-none w-full'>
+				<div class="grayscale pointer-events-none w-full">
 					<svelte:component
 						this={c.default}
 						bind:values={slider_values}
@@ -115,7 +148,7 @@
 						bind:max={question.answers.max}
 						pips
 						float
-						all='label'
+						all="label"
 					/>
 				</div>
 			{/await}
@@ -131,18 +164,18 @@
 						bind:max={question.answers.max}
 						pips
 						float
-						all='label'
+						all="label"
 					/>
 				</div>
-				<div class='flex justify-center'>
+				<div class="flex justify-center">
 					<button
-						class='w-1/3 text-3xl bg-[#B07156] my-2 disabled:opacity-60 rounded-lg p-1 transition'
+						class="w-1/3 text-3xl bg-[#B07156] my-2 disabled:opacity-60 rounded-lg p-1 transition"
 						disabled={selected_answer !== undefined}
 						on:click={() => {
 							selected_answer = slider_value[0];
 							timer_res = '0';
 						}}
-					>{$t('words.submit')}
+						>{$t('words.submit')}
 					</button>
 				</div>
 			{/await}
@@ -151,7 +184,7 @@
 		{#each question.answers as answer, i}
 			<button
 				disabled={selected_answer !== undefined || timer_res === '0'}
-				class='p-2 rounded-lg flex justify-center w-full transition bg-amber-300 my-5 disabled:grayscale text-black'
+				class="p-2 rounded-lg flex justify-center w-full transition bg-amber-300 my-5 disabled:grayscale text-black"
 				on:click={() => {
 					selected_answer = i;
 					timer_res = '0';
@@ -165,7 +198,7 @@
 		{#await import('$lib/play/admin/slide.svelte')}
 			<Spinner my={false} />
 		{:then c}
-			<div class='max-h-[90%] max-w-[90%]'>
+			<div class="max-h-[90%] max-w-[90%]">
 				<svelte:component this={c.default} bind:question />
 			</div>
 		{/await}
@@ -173,23 +206,23 @@
 		{#if timer_res === '0'}
 			{#each question.answers as answer, i}
 				<div
-					class='p-2 rounded-lg flex justify-center w-full transition bg-gray-200 my-5 text-black'
+					class="p-2 rounded-lg flex justify-center w-full transition bg-gray-200 my-5 text-black"
 				>
 					{answer.answer}
 				</div>
 			{/each}
 		{:else}
-			<div class='flex justify-center mt-2'>
+			<div class="flex justify-center mt-2">
 				<input
-					type='text'
+					type="text"
 					bind:value={text_input}
-					class='bg-gray-50 focus:ring text-gray-900 rounded-lg focus:ring-blue-500 block w-full p-2 dark:bg-gray-700 dark:text-white dark:focus:ring-blue-500 outline-none transition text-center'
+					class="bg-gray-50 focus:ring text-gray-900 rounded-lg focus:ring-blue-500 block w-full p-2 dark:bg-gray-700 dark:text-white dark:focus:ring-blue-500 outline-none transition text-center"
 				/>
 			</div>
-			<div class='flex justify-center'>
+			<div class="flex justify-center">
 				<button
 					disabled={!text_input}
-					class='w-1/3 text-3xl bg-[#B07156] my-2 disabled:opacity-60 rounded-lg p-1 transition'
+					class="w-1/3 text-3xl bg-[#B07156] my-2 disabled:opacity-60 rounded-lg p-1 transition"
 					on:click={() => {
 						selected_answer = text_input;
 						timer_res = '0';
@@ -197,75 +230,78 @@
 				>
 			</div>
 		{/if}
-		<div class='flex flex-col w-full h-full gap-4 px-4 py-6'>
+	{:else if question.type === QuizQuestionType.ORDER}
+		<div class="flex flex-col w-full h-full gap-4 px-4 py-6">
 			{#each question.answers as answer, i (answer.id)}
 				<div
-					class='w-full h-fit flex-row rounded-lg p-2 align-middle'
+					class="w-full h-fit flex-row rounded-lg p-2 align-middle"
 					animate:flip={{ duration: 100 }}
 					style="background-color: {answer.color ?? '#b07156'}"
 				>
 					<button
 						on:click={() => {
-								question.answers = swapArrayElements(question.answers, i, i - 1);
-							}}
-						class='disabled:opacity-50 transition shadow-lg bg-black bg-opacity-30 w-full flex justify-center rounded-lg p-2 hover:bg-opacity-20 transition'
-						type='button'
-						disabled={i === 0}
+							question.answers = swapArrayElements(question.answers, i, i - 1);
+						}}
+						class="disabled:opacity-50 transition shadow-lg bg-black bg-opacity-30 w-full flex justify-center rounded-lg p-2 hover:bg-opacity-20 transition"
+						type="button"
+						disabled={i === 0 || order_corrected}
 					>
 						<svg
-							class='w-8 h-8'
-							stroke-width='2'
-							viewBox='0 0 24 24'
-							fill='none'
-							xmlns='http://www.w3.org/2000/svg'
-							color='currentColor'
+							class="w-8 h-8"
+							stroke-width="2"
+							viewBox="0 0 24 24"
+							fill="none"
+							xmlns="http://www.w3.org/2000/svg"
+							color="currentColor"
 						>
 							<path
-								d='M12 22a2 2 0 110-4 2 2 0 010 4zM12 15V2m0 0l3 3m-3-3L9 5'
-								stroke='currentColor'
-								stroke-width='2'
-								stroke-linecap='round'
-								stroke-linejoin='round'
+								d="M12 22a2 2 0 110-4 2 2 0 010 4zM12 15V2m0 0l3 3m-3-3L9 5"
+								stroke="currentColor"
+								stroke-width="2"
+								stroke-linecap="round"
+								stroke-linejoin="round"
 							/>
 						</svg>
 					</button>
-					<p class='w-full text-center p-2 text-2xl'>{answer.answer}</p>
+					<p class="w-full text-center p-2 text-2xl">{answer.answer}</p>
 
 					<button
 						on:click={() => {
-								question.answers = swapArrayElements(question.answers, i, i + 1);
-							}}
-						class='disabled:opacity-50 transition shadow-lg bg-black bg-opacity-30 w-full flex justify-center rounded-lg p-2 hover:bg-opacity-20 transition'
-						type='button'
-						disabled={i === question.answers.length - 1}
+							question.answers = swapArrayElements(question.answers, i, i + 1);
+						}}
+						class="disabled:opacity-50 transition shadow-lg bg-black bg-opacity-30 w-full flex justify-center rounded-lg p-2 hover:bg-opacity-20 transition"
+						type="button"
+						disabled={i === question.answers.length - 1 || order_corrected}
 					>
 						<svg
-							class='w-8 h-8'
-							stroke-width='2'
-							viewBox='0 0 24 24'
-							fill='none'
-							xmlns='http://www.w3.org/2000/svg'
-							color='currentColor'
+							class="w-8 h-8"
+							stroke-width="2"
+							viewBox="0 0 24 24"
+							fill="none"
+							xmlns="http://www.w3.org/2000/svg"
+							color="currentColor"
 						>
 							<path
-								d='M12 6a2 2 0 110-4 2 2 0 010 4zM12 9v13m0 0l3-3m-3 3l-3-3'
-								stroke='currentColor'
-								stroke-width='2'
-								stroke-linecap='round'
-								stroke-linejoin='round'
+								d="M12 6a2 2 0 110-4 2 2 0 010 4zM12 9v13m0 0l3-3m-3 3l-3-3"
+								stroke="currentColor"
+								stroke-width="2"
+								stroke-linecap="round"
+								stroke-linejoin="round"
 							/>
 						</svg>
 					</button>
 				</div>
 			{/each}
 			<button
-				class='bg-[#B07156] hover:bg-amber-700 text-white font-bold py-2 px-4 rounded-lg mt-2 transition w-full'
-				type='button'
+				class="bg-[#B07156] hover:bg-amber-700 text-white font-bold py-2 px-4 rounded-lg mt-2 transition w-full"
+				type="button"
+				disabled={timer_res === '0'}
 				on:click={() => {
-						select_complex_answer(question.answers);
-					}}
+					select_complex_answer();
+				}}
 			>
 				{$t('words.submit')}
 			</button>
+		</div>
 	{/if}
 </div>