Radar Chart Survey
let currentQuestionIndex = 0;
const answers = [];
const questions = [
"Question 1: Rate your experience with JavaScript (1-10)",
"Question 2: Rate your experience with CSS (1-10)",
"Question 3: Rate your experience with HTML (1-10)",
"Question 4: Rate your experience with React (1-10)",
"Question 5: Rate your experience with Node.js (1-10)"
];
function displayQuestion() {
document.getElementById('question').textContent = questions[currentQuestionIndex];
}
function nextQuestion() {
const answer = document.getElementById('answer').value;
answers.push(parseInt(answer));
if (currentQuestionIndex < questions.length - 1) {
currentQuestionIndex++;
displayQuestion();
} else {
document.getElementById('question-container').style.display = 'none';
displayChart();
}
}
function displayChart() {
const ctx = document.getElementById('radarChart').getContext('2d');
document.getElementById('radarChart').style.display = 'block';
new Chart(ctx, {
type: 'radar',
data: {
labels: questions,
datasets: [{
label: 'User Ratings',
data: answers,
backgroundColor: 'rgba(54, 162, 235, 0.2)',
borderColor: 'rgba(54, 162, 235, 1)',
borderWidth: 1
}]
},
options: {
scale: {
ticks: {
beginAtZero: true,
max: 10
}
}
}
});
}
window.onload = displayQuestion;