Artificial Intelligence
Please fill the required field.

Crea un'app web di domande e risposte utilizzando React e Vite per il frontend e Express.js per il backend, mostrando schema di come sono posizionate directory e files. Il server web leggerà legge il file denominato dati.json il cui contenuto è il seguent


Certo! Di seguito troverai la struttura proposta per la tua app di domande e risposte, completa di directory e file, codice di esempio per `server.js` e `App.jsx`, oltre al file di configurazione di Vite e il CSS per lo stile. ### Struttura delle directory ``` /my-qa-app │ ├── /backend # Cartella per il backend │ ├── server.js # Server Express │ ├── dati.json # File JSON con domande e risposte │ └── package.json # Dipendenze del backend │ ├── /frontend # Cartella per il frontend │ ├── src │ │ ├── App.jsx # Componente principale React │ │ ├── index.js # Punto di entry dell'app React │ │ └── style.css # Stile CSS │ ├── index.html # File HTML principale │ └── vite.config.js # Configurazione di Vite │ └── package.json # Dipendenze del frontend ``` ### Contenuto dei file #### `backend/server.js` ```javascript const express = require('express'); const cors = require('cors'); const fs = require('fs'); const path = require('path'); const app = express(); const PORT = 5000; // Puoi scegliere qualsiasi porta disponibile app.use(cors()); app.use(express.json()); function readData() { const dataPath = path.join(__dirname, 'dati.json'); if (!fs.existsSync(dataPath)) { throw new Error('File dati.json non trovato'); } const data = fs.readFileSync(dataPath, 'utf8'); return JSON.parse(data); } app.get('/api/questions', (req, res) => { try { const data = readData(); const questions = data.Dati.map((item, index) => ({ id: index + 1, ...item })); res.json(questions); } catch (error) { res.status(500).json({ error: error.message }); } }); app.listen(PORT, () => { console.log(`Server in esecuzione su http://localhost:${PORT}`); }); ``` #### `frontend/src/App.jsx` ```javascript import React, { useEffect, useState } from 'react'; import './style.css'; const App = () => { const [questions, setQuestions] = useState([]); const [currentQuestion, setCurrentQuestion] = useState(null); const [userAnswer, setUserAnswer] = useState(''); const [attempts, setAttempts] = useState(0); const [selectedRange, setSelectedRange] = useState('all'); useEffect(() => { fetch('/api/questions') .then(response => response.json()) .then(data => { setQuestions(data); randomizeQuestion(data); }) .catch(err => console.error(err)); }, []); const randomizeQuestion = (data) => { let availableQuestions = selectedRange === 'all' ? data : data.slice(0, parseInt(selectedRange)); const randomIndex = Math.floor(Math.random() * availableQuestions.length); setCurrentQuestion(availableQuestions[randomIndex]); setAttempts(0); setUserAnswer(''); }; const handleAnswerSubmit = (e) => { e.preventDefault(); if (userAnswer.trim().toLowerCase() === currentQuestion.Risposta.toLowerCase()) { alert('Risposta corretta!'); randomizeQuestion(questions); } else { alert(`Risposta errata! Hai fatto ${attempts + 1} tentativi.`); setAttempts(attempts + 1); } }; return ( <div className="app"> <h1>{currentQuestion ? currentQuestion.Domanda : 'Loading...'}</h1> <form onSubmit={handleAnswerSubmit}> <input type="text" value={userAnswer} onChange={(e) => setUserAnswer(e.target.value)} placeholder="Rispondi qui" /> <button type="submit">Invia risposta</button> </form> <label> Seleziona un range: <select value={selectedRange} onChange={(e) => setSelectedRange(e.target.value)}> <option value="all">Tutte le domande</option> <option value="5">Le prime 5 domande</option> <option value="3">Le prime 3 domande</option> </select> </label> </div> ); }; export default App; ``` #### `frontend/vite.config.js` ```javascript import { defineConfig } from 'vite'; import react from '@vitejs/plugin-react'; export default defineConfig({ plugins: [react()], server: { proxy: { '/api': 'http://localhost:5000', // Inoltra le richieste API al server backend }, }, }); ``` #### `frontend/src/style.css` ```css .app { max-width: 600px; margin: auto; text-align: center; padding: 20px; border: 1px solid #ccc; border-radius: 8px; box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1); } input { padding: 10px; margin-bottom: 10px; width: calc(100% - 22px); } button { padding: 10px 15px; background-color: #28a745; color: white; border: none; border-radius: 4px; cursor: pointer; } button:hover { background-color: #218838; } select { margin-top: 20px; padding: 10px; } ``` #### `backend/dati.json` ```json { "title": "MioSchema", "description": "Prova", "Dati": [ { "Domanda": "Qual è il tuo nome?", "Risposta": "te" }, { "Domanda": "Sei felice?", "Risposta": "no" }, { "Domanda": "Dove abiti?", "Risposta": "me" }, { "Domanda": "Chi è il re?", "Risposta": "re" }, { "Domanda": "Qual è il tuo animale?", "Risposta": "ali" } ] } ``` ### Note - Assicurati di installare le dipendenze necessarie per il backend e per il frontend. Usa `npm install express cors` nel backend e `npm install react react-dom` nel frontend. - Assicurati di eseguire il backend (`node server.js`) e il frontend (`npm run dev`) in terminali separati. - La logica di randomizzazione e la gestione degli errori sono incluse per ripetere il quiz finché la risposta non è corretta. Puoi modificare ulteriormente le logiche e lo stile secondo le tue preferenze! Buona programmazione!