add: addSection component and styling components

src/components/AddSection.svelte

@@ -1,36 +1,47 @@
 <script lang="ts">
-    let selectedSection = '';
-    let sections: section[] = [];
+	import LargeSection from "./LargeSection.svelte";
+	import RadioSection from "./RadioSection.svelte";
+	import TrueFalseSection from "./TrueFalseSection.svelte";
 
-    type question = {
-        id: Number;
-        number: Number;
-        question: string;
-        answer: string;
-    }
+    let sections: section<any>[] = [];
 
-    type section = {
+    type section<T> = {
         id: Number;
         typeSection: string;
-        questions: question[];
+        questions: T[];
     }
 
-    function addSection() {
-        if (selectedSection == 'Desarrollo') {
-            sections = [...sections, {id: Date.now(), typeSection: "Desarrollo", questions: []}]
-        }
+
+    function addSection(type: string) {
+        const newSection = {
+            id: Date.now(),
+            typeSection: type,
+            questions: [] // Inicialmente sin preguntas
+        };
+
+        sections = [...sections, newSection];
     }
 
-</script>
+    function removeSection(id: any) {
+        sections = sections.filter(section => section.id !== id);
+    };
 
-<div>
-    <select name="" id="" bind:value={selectedSection} on:select={addSection}>
-        <option value="Alternativas">Alternativas</option>
-        <option value="Desarrollo">Desarrollo</option>
-        <option value="VoF">Verdadero o Falso</option>
-    </select>
+</script>
 
-    {#each sections as section}
-
+<div class="flex flex-col w-[50%] mx-auto justify-center items-center bg-white my-5 rounded-lg p-5">
+    {#each sections as section (section.id)}
+        {#if section.typeSection === 'large-question'}
+            <LargeSection onRemove={() => removeSection(section.id)}/>
+        {:else if section.typeSection === 'multiple-choice'}
+            <RadioSection onRemove={() => removeSection(section.id)}/>
+        {:else if section.typeSection === 'true-false'}
+            <TrueFalseSection onRemove={() => removeSection(section.id)}/>
+        {/if}
     {/each}
+
+    <div class="flex flex-row gap-8">
+        <button on:click={() => addSection('large-question')}>+ Sección Desarrollo</button>
+        <button on:click={() => addSection('true-false')}>+ Sección Verdadero y Falso</button>
+        <button on:click={() => addSection('multiple-choice')}>+ Selección Múltiple</button>
+    </div>
 </div>

src/components/LargeQuestion.svelte

@@ -1,11 +1,21 @@
 <script>
+
     export let id;
     export let number;
     export let question = '';
     export let answer = '';
+    export let onRemove;
 </script>
 
-<div class="flex flex-col gap-2 bg-white">
-    <input type="text" bind:value={question} placeholder="Escriba la pregunta">
-    <input type="text" bind:value={answer} placeholder="Escriba la respuesta">
+<div class="flex flex-row w-full gap-2 mb-8 bg-white">
+    <div class="flex flex-col gap-2 w-full">
+        <input class="bg-slate-100 p-1 rounded px-2" type="text" bind:value={question} placeholder="Escriba la pregunta">
+        <input class="bg-slate-100 p-1 rounded px-2" type="text" bind:value={answer} placeholder="Escriba la respuesta">
+    </div>
+    <button 
+    on:click={onRemove}
+    class="">
+    <svg xmlns="http://www.w3.org/2000/svg" width="26px" height="26px" viewBox="0 0 24 24">
+        <path fill="black" d="M7 21q-.825 0-1.412-.587T5 19V6H4V4h5V3h6v1h5v2h-1v13q0 .825-.587 1.413T17 21zm2-4h2V8H9zm4 0h2V8h-2z" />
+    </svg></button>
 </div>

src/components/LargeSection.svelte

@@ -3,10 +3,11 @@
 
     let id;
     let instructions = '';
+    export let onRemove;
 
-    let questions: question[] = [];
+    let questions: LargeQuestion[] = [];
 
-    type question = {
+    type LargeQuestion = {
         id: Number;
         number: Number;
         question: string;
@@ -16,16 +17,41 @@
     function addQuestion() {
         questions = [...questions, {id: Date.now(), number: questions.length + 1, question: '', answer: ''}]
     }
+
+    function removeQuestion(id: any) {
+        questions = questions.filter(question => question.id !== id);
+    };
+
+    const handleInstructionsChange = (e: any) => {
+      instructions = e.target.value;
+    };
 </script>
 
-<div>
+<div class="flex flex-col w-full my-5 px-5">
+    <div class="flex flex-row justify-between">
+        <p class=" text-2xl font-semibold">Sección de Desarrollo</p>
+        <button 
+        on:click={onRemove} 
+        class="text-lg px-3 py-1 bg-red-500 hover:bg-red-600 text-white rounded">Eliminar Sección</button>
+    </div>
+    <input
+      type="text"
+      bind:value={instructions}
+      on:input={handleInstructionsChange}
+      placeholder="Introduzca instrucciones de la sección"
+      class=" bg-slate-100 my-3 py-1 px-2 rounded"/>
+
     {#each questions as question (question.id)}
         <LargeQuestion 
         id = {question.id}
         number={question.number}
         bind:question = {question.question}
         bind:answer = {question.answer}
+        onRemove={() => removeQuestion(question.id)}
         />
     {/each}
-    <button on:click={addQuestion}>Add Question</button>
+    <button 
+    on:click={addQuestion} 
+    class="w-full bg-emerald-400 hover:bg-emerald-500 transition-all p-1 rounded">
+    <p class="text-lg font-medium">+ Pregunta</p></button>
 </div>

src/components/RadioInput.svelte

@@ -11,7 +11,7 @@
     };
 </script>
 
-<div>
+<div class="flex flex-row gap-1 my-1 align-middle">
     <input
       type="radio"
       name={name}
@@ -22,6 +22,11 @@
       type="text"
       bind:value={label}
       on:input={handleLabelChange}
-      placeholder="Escriba una respuesta" />
-    <button on:click={onRemove}>Eliminar</button>
+      placeholder="Escriba una respuesta" 
+      class="px-2 py-1 rounded bg-slate-100"/>
+    <button on:click={onRemove}>
+      <svg xmlns="http://www.w3.org/2000/svg" width="26px" height="26px" viewBox="0 0 256 256">
+        <path fill="#ed333b" d="M208 32H48a16 16 0 0 0-16 16v160a16 16 0 0 0 16 16h160a16 16 0 0 0 16-16V48a16 16 0 0 0-16-16m-24 104H72a8 8 0 0 1 0-16h112a8 8 0 0 1 0 16" />
+      </svg>
+    </button>
 </div>

src/components/RadioQuestion.svelte

@@ -7,11 +7,12 @@
         value: string;
     };
 
-    let id;
-    let number;
-    let question = '';
-    let radios: radio[] = []; // Lista de los radio buttons
-    let selectedRadio = ''; // Almacena el radio seleccionado
+    export let id;
+    export let number;
+    export let question = '';
+    export let radios: radio[] = []; // Lista de los radio buttons
+    export let answer = ''; // Almacena el radio seleccionado
+    export let onRemove;
 
 
 
@@ -34,24 +35,36 @@
 
 </script>
 
-<div>
-    <h2>Opciones dinámicas con botones de radio</h2>
-    <input
-    type="text"
-    bind:value={question}
-    on:input={handleQuestionChange}
-    placeholder="Escribe la pregunta" />
+<div class="flex flex-col mb-8">
+    <div class="flex flex-row gap-2 w-full mb-2">
+        <input
+        type="text"
+        bind:value={question}
+        on:input={handleQuestionChange}
+        placeholder="Escribe la pregunta"
+        class="w-full bg-slate-100 p-1 rounded px-2">
+
+        <button on:click={addRadio}
+        class="px-2 py-1 rounded w-full font-medium bg-emerald-300 hover:bg-emerald-400">+ Alternativa</button>
 
-    <button on:click={addRadio}>Agregar opción</button>
-
-    {#each radios as radio (radio.id)}
-        <RadioInput
-        name="group1"
-        bind:label={radio.label}
-        bind:value={radio.label}
-        bind:group={selectedRadio}
-        onRemove={() => removeRadio(radio.id)} />
-    {/each}
-
-    <p>Radio seleccionado: {selectedRadio}</p> <!-- Aquí se muestra el valor del radio seleccionado -->
+        <!-- <p>Radio seleccionado: {answer}</p>  Aquí se muestra el valor del radio seleccionado -->
+        <button 
+        on:click={onRemove}
+        class="">
+        <svg xmlns="http://www.w3.org/2000/svg" width="26px" height="26px" viewBox="0 0 24 24">
+            <path fill="black" d="M7 21q-.825 0-1.412-.587T5 19V6H4V4h5V3h6v1h5v2h-1v13q0 .825-.587 1.413T17 21zm2-4h2V8H9zm4 0h2V8h-2z" />
+        </svg></button>
+    </div>
+    <div class="flex flex-col">
+        {#each radios as radio (radio.id)}
+            <RadioInput
+            name="group1"
+            bind:label={radio.label}
+            bind:value={radio.label}
+            bind:group={answer}
+            onRemove={() => removeRadio(radio.id)} />
+        {/each}
+    </div>
 </div>
+
+

src/components/RadioSection.svelte

@@ -0,0 +1,68 @@
+<script lang="ts">
+	import RadioQuestion from "./RadioQuestion.svelte";
+
+    let id;
+    let instructions = '';
+    let questions: RadioQuestion[] = [];
+    export let onRemove;
+
+    type radio = {
+        id: Number;
+        label: string;
+        value: string;
+    };
+
+    type RadioQuestion = {
+        id: Number;
+        number: Number;
+        question: string;
+        radios: radio[];
+        answer: string;
+    };
+
+    function addQuestion() {
+        questions = [...questions, {
+            id: Date.now(), 
+            number: questions.length + 1, 
+            question: '', 
+            radios: [],
+            answer: ''}]
+    }
+
+    function removeQuestion(id: any) {
+        questions = questions.filter(question => question.id !== id);
+    };
+
+    function handleQuestionChange(e: any) {
+      instructions = e.target.value;
+    };
+</script>
+
+<div class="flex flex-col w-full my-5 px-5">
+    <div class="flex flex-row justify-between">
+        <p class=" text-2xl font-semibold">Sección de Selección Múltiple</p>
+        <button 
+        on:click={onRemove} 
+        class="text-lg px-3 py-1 bg-red-500 hover:bg-red-600 text-white rounded">Eliminar Sección</button>
+    </div>
+    <input
+    type="text"
+    bind:value={instructions}
+    on:input={handleQuestionChange}
+    placeholder="Introduce instrucciones de la sección"
+    class=" bg-slate-100 my-3 py-1 px-2"/>
+
+    {#each questions as question (question.id)}
+        <RadioQuestion 
+        id = {question.id}
+        number={question.number}
+        bind:question = {question.question}
+        bind:answer = {question.answer}
+        onRemove={() => removeQuestion(question.id)}
+        />
+    {/each}
+    <button 
+    on:click={addQuestion} 
+    class="w-full bg-emerald-400 hover:bg-emerald-500 p-1 rounded-lg">
+    <p class="text-lg font-medium">+ Pregunta</p></button>
+</div>

src/components/TrueFalseQuestion.svelte

@@ -1,16 +1,37 @@
 <script>
-    let number = '';
-    let question = '';
-    let answer = '';
-    let justification = '';
+    export let id;
+    export let number;
+    export let question = '';
+    export let answer = '';
+    export let justification = '';
+    export let onRemove;
 </script>
 
-<div class="flex flex-row gap-2 bg-white">
-    <select name="" id="" bind:value={answer}>
-        <option value="" disabled selected>Seleccione una respuesta</option>
-        <option value="Verdadero">Verdadero</option>
-        <option value="Falso">Falso</option>
-    </select>
-    <input type="text" bind:value={question} placeholder="Escriba la pregunta">
-</div>
-    <input type="text" bind:value={justification} placeholder="Escriba la justificación">
+<div class="flex flex-row w-full gap-2 mb-8">
+    <div class="flex flex-col w-full gap-2 bg-white">
+        <input 
+        type="text" 
+        bind:value={question} 
+        placeholder="Escriba la pregunta"
+        class="bg-slate-100 py-1 rounded px-2">
+
+        <div class="flex flex-row gap-2 w-full">
+            <select name="" id="" bind:value={answer} class="rounded h-full px-2">
+                <option value="" disabled selected>Seleccione una respuesta</option>
+                <option value="Verdadero">Verdadero</option>
+                <option value="Falso">Falso</option>
+            </select>
+            <input 
+            type="text" 
+            bind:value={justification} 
+            placeholder="Escriba la justificación"
+            class="bg-slate-100 py-1 rounded px-2 w-full">
+        </div>
+    </div>
+    <button 
+    on:click={onRemove}
+    class="">
+    <svg xmlns="http://www.w3.org/2000/svg" width="26px" height="26px" viewBox="0 0 24 24">
+        <path fill="black" d="M7 21q-.825 0-1.412-.587T5 19V6H4V4h5V3h6v1h5v2h-1v13q0 .825-.587 1.413T17 21zm2-4h2V8H9zm4 0h2V8h-2z" />
+    </svg></button>
+</div>