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!