/** @jsxImportSource https://esm.sh/react */ import React, { useState } from "https://esm.sh/react"; import { createRoot } from "https://esm.sh/react-dom/client"; // Define question types interface Question { id: string; content: string; type: "text" | "multiple-choice"; options?: string[]; } // Sample questionnaire (can be expanded or fetched dynamically) const QUESTIONS: Question[] = [ { "content": "Come ti chiami?", "id": "q0", "type": "text", }, { "content": "Se il tuo frigo potesse parlare, cosa direbbe più spesso?", "id": "q1", "type": "multiple-choice", "options": [ "Per favore, riempimi, sono desolatamente vuoto", "Basta! Non ci sta più nulla!", "Perché apri sempre la porta senza prendere niente?", "Gli avanzi del 2019 stanno sviluppando una civiltà", ], }, { "content": "Come reagisci quando trovi una calza spaiata?", "id": "q2", "type": "multiple-choice", "options": [ "La conservo per i prossimi 10 anni sperando di trovare la sua gemella", "La uso come spolverino, almeno serve a qualcosa", "La indosso con un'altra spaiata, creando tendenza", "La regalo al gatto come nuovo giocattolo", ], }, { "content": "Se potessi scegliere un superpotere inutile, quale sceglieresti?", "id": "q3", "type": "multiple-choice", "options": [ "La capacità di far crescere istantaneamente le unghie dei piedi", "Il potere di parlare con i semafori", "L'abilità di trasformare l'acqua in... acqua", "Il dono di sapere sempre quanti chicchi di riso ci sono nel tuo piatto", ], }, { "content": "Come organizzi le tue password?", "id": "q4", "type": "multiple-choice", "options": [ "Uso sempre password123 e prego che nessuno lo scopra", "Ho un sistema complesso basato sulle fasi lunari", "Le scrivo tutte su post-it colorati attaccati al monitor", "Ho un documento criptato chiamato non_sono_le_mie_password.txt", ], }, { "content": "Se i tuoi oggetti personali organizzassero una rivolta, quale oggetto sarebbe il leader e perché?", "id": "q5", "type": "text", }, { "content": "Descrivi il tuo lunedì mattina come se fossi un narratore di documentari naturalistici.", "id": "q6", "type": "text", }, { "content": "Se la tua vita fosse un piatto di cucina, quale sarebbe e quali ingredienti conterrebbe?", "id": "q7", "type": "text", }, { "content": "Inventa una scusa assurda ma credibile per essere in ritardo al lavoro che nessuno ha mai usato prima.", "id": "q8", "type": "text", }, { "content": "Se dovessi dare un nome scientifico latino al tuo stile di ballare, quale sarebbe?", "id": "q9", "type": "text", }, { "content": "Quale messaggio lasceresti in una capsula del tempo che verrà aperta tra 1000 anni, sapendo che probabilmente sarà l'unica testimonianza della nostra epoca?", "id": "q10", "type": "text", }, { "content": "I pinguini hanno preso il controllo del mondo. Come ti guadagni da vivere nella nuova società?", "id": "q11", "type": "multiple-choice", "options": [ "Diventando un traduttore pinguino-umano", "Aprendo un negozio di sciarpe riscaldate", "Insegnando ai pinguini a usare le scale mobili", "Lavorando come consulente per il disgelo globale", ], }, { "content": "Il tuo elettrodomestico preferito acquista improvvisamente coscienza. Come cambia la vostra relazione?", "id": "q12", "type": "multiple-choice", "options": [ "Diventiamo migliori amici e guardiamo serie TV insieme", "Mi ricatta minacciando di rivelare le mie abitudini di utilizzo", "Si dimette e va a vivere alle Maldive", "Inizia a darmi consigli non richiesti sulla mia vita", ], }, { "content": "Se potessi mandare un messaggio all'universo usando solo emoji, quali useresti e in che ordine per esprimere il senso della vita?", "id": "q13", "type": "text", }, { "content": "Se potessi scegliere un superpotere utile, quale sarebbe?", "id": "q14", "type": "multiple-choice", "options": [ "Volare (per scappare dai problemi... letteralmente)", "Diventare invisibile (per spiare senza essere beccato)", "Leggere nel pensiero (per sapere cosa pensano gli altri di te... o magari no?)", "Parlare con gli animali (per scoprire finalmente cosa borbotta il tuo gatto)", "Fermare il tempo (per quei pisolini extra)", ], }, { "content": "La tua libreria ideale è organizzata per...", "id": "q15", "type": "multiple-choice", "options": [ "Colore (perché l'estetica prima di tutto)", "Autore (per trovare subito il tuo preferito)", "Genere (per quando hai voglia di qualcosa di specifico)", "Casualmente (per il brivido della sorpresa)", "Non ho una libreria, i libri sono ammassati in scatole (perché la vita è caos)", ], }, { "content": "Il tuo sabato sera ideale è...", "id": "q16", "type": "multiple-choice", "options": [ "Uscire con gli amici (socializzare è fondamentale)", "Maratona di film o serie TV (divano, coperta e snack)", "Leggere un buon libro (l'avventura è tra le pagine)", "Dedicarsi a un hobby creativo (mani in pasta... o pennelli)", "Dormire (il riposo del guerriero... o del pigro)", ], }, { "content": "Quando incontri una persona nuova, cosa noti per primo?", "id": "q17", "type": "multiple-choice", "options": [ "Il suo sorriso (un sorriso può dire molto)", "Il suo abbigliamento (lo stile parla di te)", "Il suo linguaggio del corpo (segnali nascosti?)", "La sua voce (il tono fa la musica)", "Se ha del cibo con sé (priorità, gente!)", ], }, { "content": "Se fossi un personaggio mitologico, quale saresti?", "id": "q18", "type": "multiple-choice", "options": [ "Un unicorno (magico e inafferrabile)", "Un drago (potente e misterioso)", "Una fenice (rinascita dalle ceneri... o dal caffè bruciato)", "Un satiro (festaiolo e amante della natura)", "Un ciclope (per vedere le cose da un'unica prospettiva... e avere un occhio di riguardo!)", ], }, { "content": "6. Descrivi in poche parole la tua filosofia di vita", "id": "q19", "type": "text", }, { "content": "Qual è il tuo più grande talento inutile?", "id": "q20", "type": "text", }, { "content": "Se potessi parlare con te stessa da bambina, che consiglio le daresti?", "id": "q21", "type": "text", }, { "content": "Qual è la cosa più strana che hai mai mangiato e ti è piaciuta?", "id": "q22", "type": "text", }, { "content": "Completa la frase: Io sono la persona che...", "id": "q23", "type": "text", }, { "content": "È domenica mattina e hai il giorno libero. Qual è la prima cosa che fai?", "id": "q24", "type": "multiple-choice", "options": [ "Dormo finché il materasso non mi chiede pietà.", "Mi sveglio presto per conquistare il mondo (o almeno fare una lunga lista di cose da fare).", "Colazione lunga e chiacchiere con il mio cane/gatto/pianta preferita.", "Mi sveglio ma rimango a letto a scrollare i social con un occhio chiuso.", ], }, { "content": "Quale di queste situazioni ti mette più a disagio?", "id": "q25", "type": "multiple-choice", "options": [ "Dimenticare il nome di qualcuno che ti saluta con entusiasmo.", "Inviare un messaggio al gruppo sbagliato e realizzare che era pieno di gif imbarazzanti.", "Essere il primo a dover parlare in una riunione di lavoro.", "Trovarsi in un ascensore con una musica che ti obbliga a fare finta di non ascoltarla.", ], }, { "content": "Qual è il tuo approccio per affrontare un problema complicato?", "id": "q26", "type": "multiple-choice", "options": [ "Mi armo di caffè e concentrazione e lo smonto pezzo per pezzo.", "Rimando finché non scappa o esplode.", "Cerco alleati e discutiamo una strategia (o una scusa per procrastinare insieme).", "Mi affido all'ispirazione divina… o a un lancio di moneta.", ], }, { "content": "Se fossi un animale, quale saresti e perché? (Risposta aperta)", "id": "q27", "type": "text", }, { "content": "Ti trovi davanti a tre porte misteriose: quale scegli?", "id": "q28", "type": "multiple-choice", "options": [ "La porta con le luci al neon e l’insegna Divertimento e Sorprese.", "La porta antica, cigolante, che emette un lieve sibilo.", "La porta che sembra non esistere, ma hai l'impressione che sia lì solo per te.", "Scappo prima di trovarmi in un film horror.", ], }, { "content": "Cosa pensi quando qualcuno ti dice: Ho bisogno di parlarti?", "id": "q29", "type": "multiple-choice", "options": [ "Oh no, mi hanno scoperto.", "Spero sia una buona notizia.", "Devo ricordarmi di non interromperli con battute.", "Chiudiamo subito la conversazione con una battuta... giusto per sicurezza.", ], }, { "content": "Quale sarebbe il tuo lavoro ideale se soldi e tempo non fossero un problema? (Risposta aperta)", "id": "q30", "type": "text", }, { "content": "Hai un compagno di viaggio durante una lunga traversata in treno. Qual è il tipo di persona che ti auguri di trovare?", "id": "q31", "type": "multiple-choice", "options": [ "Un appassionato di storie incredibili che non si fermano mai.", "Qualcuno che dorme profondamente, come me.", "Un fan di giochi di carte o rompicapo per passare il tempo.", "Nessuno: viaggio in silenzio con i miei pensieri (e auricolari).", ], }, { "content": "Hai appena scoperto una nuova app che ti promette di migliorare la vita. Qual è la tua prima reazione?", "id": "q32", "type": "multiple-choice", "options": [ "Scarico subito, potrei essere la versione 2.0 di me stesso!", "Vediamo le recensioni… con scetticismo, ovviamente.", "Un'altra app? Già la dimenticherò in tre giorni.", "La mia vita è perfetta così com'è... grazie, ma no.", ], }, { "content": "

Scegli una didascalia per questa immagine.", "id": "q33", "type": "multiple-choice", "options": [ "Multitasking a livello professionale... o disperato!", "Un giorno normale, ma con un pizzico di caos in più.", "Scommetto che il gatto ha deciso di unirsi al volo!", "La mia giornata spiegata meglio di quanto potrei farlo io.", "Chiamalo equilibrio… o pura follia.", ], }, { "content": "

Scegli una didascalia per questa immagine.", "id": "q34", "type": "multiple-choice", "options": [ "Quando le emozioni decidono di organizzare una festa senza invitarmi.", "Caos o arte? Dipende da quanta caffeina hai bevuto.", "Una giornata normale dentro la mia testa.", "Il balletto delle emozioni umane.", "La calma dopo (e prima) della tempesta.", ], }, { "content": "

Scegli una didascalia per questa immagine.", "id": "q35", "type": "multiple-choice", "options": [ "Il segreto della salsa perfetta è nascosto qui.", "Un lunedì mattina visto al microscopio.", "In attesa dell'autobus intergalattico.", "Manuale di istruzioni per il tostapane cosmico.", "Quando chiedi direzioni, ma ricevi solo poesie.", ], }, { "content": "

In questa immagine percepisci", "id": "q36", "type": "multiple-choice", "options": [ "il colore rosso in primo piano", "il colore blu in primo piano", "rosso e blu allo stesso livello", ], }, ]; // Progress Bar Component function ProgressBar({ currentStep, totalSteps, }: { currentStep: number; totalSteps: number; }) { const progressPercentage = ((currentStep + 1) / totalSteps) * 100; return (

); } function QuestionnaireApp() { const [currentQuestionIndex, setCurrentQuestionIndex] = useState(0); const [answers, setAnswers] = useState>({}); const [currentAnswer, setCurrentAnswer] = useState(""); const currentQuestion = QUESTIONS[currentQuestionIndex]; const handleAnswerChange = (value: string) => { setCurrentAnswer(value); }; const handleNextQuestion = () => { // Save current answer setAnswers(prev => ({ ...prev, [currentQuestion.id]: currentAnswer, })); // Reset current answer and move to next question setCurrentAnswer(""); if (currentQuestionIndex < QUESTIONS.length - 1) { setCurrentQuestionIndex(prev => prev + 1); } else { // Submit answers when questionnaire is complete submitAnswers({ ...answers, [currentQuestion.id]: currentAnswer }); } }; const submitAnswers = async (submittedAnswers: Record) => { try { const response = await fetch("/submit-questionnaire", { method: "POST", headers: { "Content-Type": "application/json", }, body: JSON.stringify(submittedAnswers), }); if (response.ok) { alert("Questionario completato con successo! 🎉"); } else { alert("Invio fallito. Riprova. ❌"); } } catch (error) { console.error("Submission error:", error); alert("Errore di rete. Controlla la connessione."); } }; const renderQuestionInput = () => { switch (currentQuestion.type) { case "text": return (

handleAnswerChange(e.target.value)}
            placeholder="Scrivi qui la tua risposta..."
            rows={4}
            style={{ width: "100%", marginTop: "10px" }}
          />
        );
      case "multiple-choice":
        return (
          <div style={{ display: "flex", flexDirection: "column", gap: "10px", marginTop: "10px" }}>
            {currentQuestion.options?.map((option, index) => (
              <label key={index} style={{ display: "flex", alignItems: "center" }}>
                <input
                  type="radio"
                  name="multipleChoice"
                  value={option}
                  checked={currentAnswer === option}
                  onChange={() =>
                    handleAnswerChange(option)}
                />
                {option}
              </label>
            ))}
          </div>
        );
    }
  };

return (
    <div
      style={{
        maxWidth: "600px",
        margin: "auto",
        padding: "20px",
        fontFamily: "Arial, sans-serif",
      }}
    >
      <div
        style={{
          marginBottom: "20px",
          display: "flex",
          justifyContent: "space-between",
          alignItems: "center",
        }}
      >
        <h2>Modulo Creazione Intimità</h2>
        <div>
          Domanda {currentQuestionIndex + 1} di {QUESTIONS.length}
        </div>
      </div>

{/* Progress Bar */}
      <ProgressBar
        currentStep={currentQuestionIndex}
        totalSteps={QUESTIONS.length}
      />

{renderQuestionInput()}

<button
        onClick={handleNextQuestion}
        disabled={!currentAnswer}
        style={{
          marginTop: "20px",
          padding: "10px 20px",
          backgroundColor: currentAnswer ? "#4CAF50" : "#cccccc",
          color: "white",
          border: "none",
          borderRadius: "5px",
          cursor: currentAnswer ? "pointer" : "not-allowed",
        }}
      >
        {currentQuestionIndex < QUESTIONS.length - 1 ? "Prossima Domanda" : "Invia Risposte"}
      </button>
    </div>
  );
}

function client() {
  createRoot(document.getElementById("root")).render(<QuestionnaireApp />);
}
if (typeof document !== "undefined") { client(); }

export default async function server(request: Request): Promise<Response> {
  // Import blob storage dynamically
  const { blob } = await import("https://esm.town/v/std/blob");

// Handle questionnaire submission
  if (request.method === "POST" && new URL(request.url).pathname === "/submit-questionnaire") {
    const answers = await request.json();

// Use the answer to the first question (q1) as the key
    const storageKey = answers["q0"] || "unknown_key";

try {
      // Store the entire answers object in blob storage
      await blob.setJSON(storageKey, answers);

console.log(`Answers stored with key: ${storageKey}`);

return new Response(
        JSON.stringify({
          status: "success",
          message: `Risposte salvate con chiave: ${storageKey}`,
        }),
        {
          headers: { "Content-Type": "application/json" },
        },
      );
    } catch (error) {
      console.error("Storage error:", error);
      return new Response(
        JSON.stringify({
          status: "error",
          message: "Impossibile salvare le risposte",
        }),
        {
          status: 500,
          headers: { "Content-Type": "application/json" },
        },
      );
    }
  }

return new Response(
    `
    <html>
      <head>
        <title>Modulo Creazione Intimità</title>
        <meta name="viewport" content="width=device-width, initial-scale=1">
      </head>
      <body>
        <div id="root"></div>
        <script src="https://esm.town/v/std/catch"></script>
        <script type="module" src="${import.meta.url}"></script>
      </body>
    </html>
  `,
    {
      headers: { "Content-Type": "text/html" },
    },
  );
}</article></body></html>

cicciocappa