Interaktiv Frågeförhandsvisning

Interaktiv Frågeförhandsvisning

Funktionalitet för Huvudsidan

1. Tabellgenerering från CSV

  • CSV-data från en stor textarea (csvTextarea) används för att skapa en interaktiv tabell.
  • Tabellen genereras dynamiskt genom att läsa rubrikerna och innehållet från CSV-koden.

2. Redigering i Tabellen

  • Varje rad har en ”Redigera”-ikon. Vid klick:
    • Alla textfält på raden visas för redigering.
    • En ”Uppdatera”-knapp aktiveras för att spara ändringar.
  • Ändringar som görs i textfälten påverkar endast den aktuella raden tills ”Uppdatera” klickas.

3. Uppdatera Raden

  • När ”Uppdatera” klickas:
    • Ändringar i textfälten sparas tillbaka till CSV-strukturen.
    • Hela tabellen och CSV-texten i den stora rutan uppdateras.

4. Ta bort en rad

  • Varje rad har en ”Ta bort”-ikon. Vid klick:
    • En dialogruta för bekräftelse visas.
    • Om bekräftat tas raden bort från CSV-strukturen.
    • Tabellen och CSV-texten uppdateras.

5. Duplicera en rad

  • Varje rad har en ”Duplicera”-ikon. Vid klick:
    • Raden dupliceras, och en ny rad läggs till direkt under den ursprungliga.
    • Ett nytt unikt ID genereras för den duplicerade raden baserat på det ursprungliga ID
       

      (t.ex., 100-01 blir 100-02 om 100-02 inte redan existerar).

    • Tabellen och CSV-texten uppdateras.

6. Sök och ersätt i CSV-text

  • En kompakt ”Sök och ersätt”-funktion ovanför textarean låter användaren:
    • Söka efter ett ord eller en fras i CSV-texten.
    • Ersätta alla förekomster av det sökta ordet med ett nytt värde.
    • Tabellen laddas om efter varje ersättning för att reflektera ändringarna.
  • En ”Ångra”-knapp låter användaren återställa innehållet till det som fanns innan den senaste ”Ersätt alla”.

7. Kopiera CSV till urklipp

  • En knapp nedanför textarean låter användaren kopiera hela innehållet av CSV-texten till urklippsminnet.
  • Innehållet kopieras med korrekta escape-tecken för bakåtsnedstreck (\\).

Användarflöden och Interaktioner

Generera tabell från CSV

  1. Text i den stora rutan (csvTextarea) används för att skapa en tabell.
  2. Tabellen visas med kolumner baserade på rubrikerna i CSV och data i varje rad.

Redigera tabellen

  • Användaren kan redigera innehållet på en rad och uppdatera tabellen samt CSV-texten genom att klicka på ”Uppdatera”.

Modifiera CSV direkt

  1. Användaren kan ändra CSV direkt i textarean.
  2. Tabellen laddas om automatiskt när textarean ändras.

Sök och ersätt

  1. Användaren skriver in en sökterm och ett ersättningsvärde.
  2. Vid klick på ”Ersätt alla” uppdateras både textarean och tabellen.
  3. ”Ångra” återställer texten och tabellen till dess tidigare tillstånd.

Hantera rader

  • Användaren kan:
    • Duplicera en rad med ett nytt unikt ID.
    • Ta bort en rad med bekräftelse.

Kopiera CSV

  • Hela innehållet i textarean kopieras till urklippsminnet för vidare användning.

Teknisk Implementering

Dynamisk Tabellgenerering

  • Tabellen byggs från CSV-data med parseCSV() som delar upp data i rubriker och rader.

Händelsehantering

  • Händelser kopplade till knappar och ikoner:
    • Klick på ”Redigera”, ”Uppdatera”, ”Ta bort”, ”Duplicera”.
    • Interaktion med ”Sök och ersätt”-funktion.

Synkronisering

  • Ändringar i tabellen synkroniseras alltid tillbaka till CSV-texten.
  • Ändringar i CSV-texten synkroniseras omedelbart till tabellen.

Undantagshantering

  • Sök och ersätt varnar om söktexten är tom.
  • Bekräftelse krävs innan en rad tas bort.

Komplett Funktionalitet

  • CSV till tabell och tabell till CSV.
  • Redigering och uppdatering av rader.
  • Sök och ersätt med ångra.
  • Duplicering med unika ID
     

    .

  • Kopiering av CSV till urklipp.
Förslag på text till ChatGPT
Skapa 10 frågor om att förenkla uttryck med parentesmultiplikation. Varje fråga ska ha 1 rätt svar och 4 felsvar, samt en förklaring och ett unikt ID. De ska vara formaterade på detta sätt. 

ID,Fråga,Rätt svar,Fel svar 1,Fel svar 2,Fel svar 3,Fel svar 4,Förklaring
708-01, Förenkla: \(2x + 3 - x + 5\),\(x + 8\),\(x + 7\),\(2x + 5\),\(8 - x\),\(7 + x\),\[ \text{Lägg ihop varje sorts term för sig. Här finns x-termer och konstanttermer.} \] \[ 2x + 3 - x + 5 \] \[ = x + 8 \]
708-02, Förenkla: \(4a + 2b - 2a + 3b\),\(2a + 5b\),\(6a + b\),\(a + 5b\),\(2a - b\),\(2a + 4b\),\[ \text{Lägg ihop varje sorts term för sig. Här finns a-termer och b-termer.} \] \[ 4a + 2b - 2a + 3b \] \[ = 2a + 5b \]
708-03, Förenkla: \(3x - 2y + x + 5y\),\(4x + 3y\),\(4x + 2y\),\(x + 7y\),\(2x - 2y\),\(x + y\),\[ \text{Lägg ihop varje sorts term för sig. Här finns x-termer och y-termer.} \] \[ 3x - 2y + x + 5y \] \[ = 4x + 3y \]

Viktigt:
1. Det ska vara exakt 4 felsvar.
2. Rätt svar ska kontrolleras med dubbla beräkningar, både före och efter att csv-koden genererats. 
3. Rätt svar och fel svar ska aldrig innehålla deluträkningar utan alltid endast svaret. 
4. I de fall förenklingar sker i förklaringarna ska varje nytt förenklat uttryck skrivas på ny rad, och därmed inledas med \[ =