Fix checkbox

src/lib/Components/MyComponents/Quiz/answers/CheckBox.svelte

@@ -11,7 +11,7 @@
 			{id}
 			bind:checked
 			type="checkbox"
-			class="relative w-[3.25rem] h-7 bg-gray-100 checked:bg-none checked:bg-blue-600 border-2 border-transparent rounded-full cursor-pointer transition-colors ease-in-out duration-200 border border-transparent ring-1 ring-transparent focus:border-blue-600 focus:ring-blue-600 ring-offset-white focus:outline-none appearance-none dark:bg-gray-700 dark:checked:bg-blue-600 dark:focus:ring-offset-gray-800 before:inline-block before:w-6 before:h-6 before:bg-white checked:before:bg-blue-200 before:translate-x-0 checked:before:translate-x-full before:shadow before:rounded-full before:transform before:ring-0 before:transition before:ease-in-out before:duration-200 dark:before:bg-gray-400 dark:checked:before:bg-blue-200"
+			class="relative w-[3.25rem] h-7 bg-gray-100 checked:bg-none checked:bg-[#96ddff] border-2 border-transparent rounded-full cursor-pointer transition-colors ease-in-out duration-200 border border-transparent ring-1 ring-transparent focus:border-[#96ddff] focus:ring-[#96ddff] ring-offset-white focus:outline-none appearance-none before:inline-block before:w-6 before:h-6 before:bg-white checked:before:bg-[var(--blue)] before:translate-x-0 checked:before:translate-x-full before:shadow before:rounded-full before:transform before:ring-0 before:transition before:ease-in-out before:duration-20"
 		/>
 	</div>
 	<label for={id}><slot /></label>

src/lib/Components/MyComponents/Quiz/answers/Input.svelte

@@ -15,10 +15,16 @@
 
 <style>
 	input {
+		background-color: rgb(232, 232, 232);
+		color: var(--blue);
 		background: white;
 		border: 4px solid var(--blue);
-		box-shadow: 0 0 4px var(--blue), 0 0 1px var(--blue) inset;
+		border-radius: 25px;
-		border-radius: var(--border-radius);
+		text-align: left;
-		text-align: center;
+		font-size: 30px;
+		font-weight: 600;
+		line-height: 20px;
+		padding: 28px 20px;
+		outline: none;
 	}
 </style>

src/lib/Components/MyComponents/Quiz/answers/Radio.svelte

@@ -8,13 +8,7 @@
 
 <div class="cover h-14 cursor-pointer">
 	<div class="h-14 w-14 flex justify-center items-center">
-		<input
+		<input {id} bind:group {value} type="radio" class="w-6 h-6 absolute flex justify-center items-center text-red-600 bg-gray-100 border-gray-300" />
-			{id}
-			bind:group
-			{value}
-			type="radio"
-			class="w-6 h-6 absolute flex justify-center items-center text-red-600 bg-gray-100 border-gray-300 focus:ring-blue-500 dark:focus:ring-blue-600 dark:ring-offset-gray-800 focus:ring-2 dark:bg-gray-700 dark:border-gray-600"
-		/>
 	</div>
 	<label for={id}><slot /></label>
 </div>

src/main.scss

@@ -35,7 +35,7 @@ p {
 :root {
 	--quizHeader: 300px;
 	--fontSize: 40px;
-	--blue: rgba(150, 221, 255);
+	--blue: #96ddff;
 	--border-radius: 25px;
 	--grey: rgba(0, 0, 0, 0.4);
 }
@@ -43,4 +43,3 @@ p {
 
 
 @import url("normalize.scss")
-

src/routes/quiz.svelte

@@ -1,5 +1,5 @@
 <script>
-	import TextForm from './Forms/textForm.svelte'
+	import TextForm from './Forms/TextForm.svelte'
 	import NumberForm from './Forms/NumberForm.svelte'
 	import SingleForm from './Forms/SingleForm.svelte'
 	import MultiplyForm from './Forms/MultiplyForm.svelte'
@@ -9,7 +9,7 @@
 	$: console.log(control)
 
 	const answers = {
-		type: 'TextForm',
+		type: 'MultiplyForm',
 		//... answers
 	}
 	const components = {

vite.config.js

@@ -5,6 +5,9 @@ import path from 'path'
 
 // https://vitejs.dev/config/
 export default defineConfig({
+	server: {
+		port: 3003
+	},
 	resolve: {
 		alias: {
 			$lib: path.resolve(__dirname, 'src', 'lib'),