Scribd
Upload
141 views3 pages

React Diagnostic Quiz App

This React component displays a diagnostic questionnaire to the user. It fetches category and question data from an API, and allows the user to select responses by radio buttons. When a response is selected, the response data is posted to the API. Once the user completes all questions, a button is displayed to navigate to the scores page, passing the diagnostic ID. State is used to track the current diagnostic, categories, and handle the response changes.

Uploaded by

Nour El
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as TXT, PDF, TXT or read online on Scribd
141 views3 pages

React Diagnostic Quiz App

This React component displays a diagnostic questionnaire to the user. It fetches category and question data from an API, and allows the user to select responses by radio buttons. When a response is selected, the response data is posted to the API. Once the user completes all questions, a button is displayed to navigate to the scores page, passing the diagnostic ID. State is used to track the current diagnostic, categories, and handle the response changes.

Uploaded by

Nour El
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as TXT, PDF, TXT or read online on Scribd
You are on page 1/ 3

import React, { useState, useEffect } from "react";

import axios from "axios";


import { useNavigate } from "react-router-dom";
import "./Diagnostique1.css";
import { useParams } from "react-router-dom";

function Diagnostique1() {
const [diagnostic, setDiagnostic] = useState();
const { id } = useParams();
const navigate = useNavigate();

const [categories, setCategory] = useState([]);

const handleResponseChange = (questionId, responseValue) => {


const response = {
text: responseValue,
diagnostic: {
id: diagnostic.id,
},
user: {
id: id,
},
question: {
id: questionId,
},
};

// Envoie la réponse à l'API pour stockage


axios
.post("http://localhost:8089/res/add", response, {
headers: {
"Content-Type": "application/json",
},
})
.then((res) => {
// Gérer la réponse du serveur ici
console.log("Réponse du serveur :", res.data);
})
.catch((error) => {
// Gérer les erreurs ici
console.error("Erreur lors de la requête :", error);
});
};

useEffect(() => {
axios
.get("http://localhost:8089/cat/all")
.then((response) => {
setCategory(response.data);
})
.catch((error) => {
console.error(error);
});

axios
.post("http://localhost:8089/dia/add", { user: { id: id } })
.then((response) => {
setDiagnostic(response.data);
console.log(response.data);
})
.catch((error) => {
console.error(error);
});
}, [id]);

const getScore = () => {


navigate(`/score/${diagnostic.id}`);
};

return (
<div>
<h1 style={{ color: "#ca62ca", textAlign: "center" }}>Diagnostic par
categorie</h1>
<br />

<div className="quiz-container">
<ul>
{categories.map((category) => (
<li key={category.id}>
<div className="question-title" style={{ color: "purple" }}>
Catégorie {category.name}
</div>
<ul>
{category.questionList.map((question) => (
<li key={question.id}>
<div>{question.text}</div>
{["Tout_A_Fait_Daccord", "Daccord", "Neutre", "Pas_daccord",
"Desaccord_Total"].map((choix) => (
<form style={{ display: "flex" }} key={`${question.id}-$
{choix}`}>
<input
type="radio"
name={`question-${question.id}`}
id={`choice1a-${question.id}`}
value={choix}
className="custom-radio"
onChange={() => handleResponseChange(question.id, choix)}
/>
<label style={{ marginBottom: "10px" }} htmlFor={`choice1a-
${question.id}`}>
{choix}
</label>
</form>
))}
</li>
))}
</ul>
</li>
))}
</ul>
</div>
<button className="submit" onClick={getScore}>
<span>Donnez Score Total</span>
</button>
</div>
);
}
export default Diagnostique1;

You might also like