- wpRunQuery {
display: none !important;
}
/* Show submit button only on final step */
.show-submit #wpRunQuery {
display: inline-block !important;
}
.show-submit .oo-ui-fieldLayout {
display: block !important;
}
- toc {display: none !important;}
const prevBtn = document.getElementById('prevBtn');
const nextBtn = document.getElementById('nextBtn');
const formSteps = document.querySelectorAll('.form-step');
const progressSteps = document.querySelectorAll('.progress-step');
const formContainer = document.getElementById('AIForm');
const previewScoreEl = document.getElementById('preview-score');
const previewLabelEl = document.getElementById('preview-label');
// Spider chart setup
const axes = [
{ label: 'Digital', angle: -Math.PI / 2 },
{ label: 'Risk', angle: -Math.PI / 2 + (2 * Math.PI / 5) },
{ label: 'Technical', angle: -Math.PI / 2 + (4 * Math.PI / 5) },
{ label: 'Standard', angle: -Math.PI / 2 + (6 * Math.PI / 5) },
{ label: 'Innovation', angle: -Math.PI / 2 + (8 * Math.PI / 5) }
];
const samrLevels = [
{ level: 1, color: '#c2255c' },
{ level: 2, color: '#1971c2' },
{ level: 3, color: '#40c057' },
{ level: 4, color: '#f08c00' }
];
function getAxisAverage(axisNum) {
let sum = 0;
let count = 0;
for (let i = 1; i <= 4; i++) {
const input = document.querySelector(`input[name="AIAssessment[q${axisNum}_${i}]"]:checked`);
if (input) {
const allRadios = document.querySelectorAll(`input[name="AIAssessment[q${axisNum}_${i}]"]`);
let numValue = 0;
allRadios.forEach((radio, index) => {
if (radio.checked) {
numValue = index + 1;
}
});
if (numValue > 0) {
sum += numValue;
count++;
}
}
}
return count > 0 ? sum / count : null;
}
function calculateScore() {
const weights = [0.25, 0.20, 0.20, 0.20, 0.15];
const values = [
getAxisAverage(1),
getAxisAverage(2),
getAxisAverage(3),
getAxisAverage(4),
getAxisAverage(5)
];
// Check if we have any data
const hasData = values.some(v => v !== null);
if (!hasData) return null;
// Replace nulls with 0 for calculation (axes without data don't contribute)
const score = values.reduce((sum, val, i) => {
return sum + (val !== null ? val * weights[i] : 0);
}, 0);
// Calculate the actual weight used (only from answered axes)
const actualWeight = values.reduce((sum, val, i) => {
return sum + (val !== null ? weights[i] : 0);
}, 0);
// Normalize by actual weight if less than full
return actualWeight > 0 ? score / actualWeight : null;
}
function drawPreview() {
const previewDiv = document.getElementById('preview-chart');
const previewContainer = document.querySelector('.live-preview-container');
if (!previewDiv) return;
let canvas = previewDiv.querySelector('canvas');
if (!canvas) {
canvas = document.createElement('canvas');
canvas.width = 250;
canvas.height = 250;
canvas.style.width = '100%';
canvas.style.height = 'auto';
previewDiv.appendChild(canvas);
}
const ctx = canvas.getContext('2d');
const centerX = canvas.width / 2;
const centerY = canvas.height / 2;
const maxRadius = canvas.width * 0.35;
ctx.clearRect(0, 0, canvas.width, canvas.height);
// Draw SAMR circles
samrLevels.forEach((samr) => {
const radius = (samr.level / 4) * maxRadius;
ctx.beginPath();
ctx.arc(centerX, centerY, radius, 0, 2 * Math.PI);
ctx.strokeStyle = samr.color;
ctx.lineWidth = 1.5;
ctx.stroke();
ctx.fillStyle = samr.color + '10';
ctx.fill();
});
// Draw axes
axes.forEach(axis => {
ctx.beginPath();
ctx.moveTo(centerX, centerY);
const endX = centerX + Math.cos(axis.angle) * maxRadius;
const endY = centerY + Math.sin(axis.angle) * maxRadius;
ctx.lineTo(endX, endY);
ctx.strokeStyle = '#cbd5e1';
ctx.lineWidth = 1;
ctx.stroke();
// Draw axis labels
const labelDistance = maxRadius + 25;
const labelX = centerX + Math.cos(axis.angle) * labelDistance;
const labelY = centerY + Math.sin(axis.angle) * labelDistance;
ctx.fillStyle = '#475569';
ctx.font = 'bold 9px Arial';
ctx.textAlign = 'center';
ctx.textBaseline = 'middle';
ctx.fillText(axis.label, labelX, labelY);
});
const values = [
getAxisAverage(1),
getAxisAverage(2),
getAxisAverage(3),
getAxisAverage(4),
getAxisAverage(5)
];
const score = calculateScore();
// Show/hide preview container based on data
if (score === null) {
previewContainer.classList.remove('has-data');
} else {
previewContainer.classList.add('has-data');
}
if (score === null) {
previewScoreEl.textContent = '-';
previewLabelEl.textContent = 'מלא את השאלות';
} else {
previewScoreEl.textContent = score.toFixed(2);
if (score >= 4.5) {
previewLabelEl.textContent = 'בשלות גבוהה';
} else if (score >= 3.6) {
previewLabelEl.textContent = 'בשלות בינונית-גבוהה';
} else if (score >= 2) {
previewLabelEl.textContent = 'בשלות בינונית';
} else if (score >= 1.5) {
previewLabelEl.textContent = 'בשלות נמוכה';
} else {
previewLabelEl.textContent = 'לא בשל';
}
}
if (values.some(v => v !== null)) {
ctx.beginPath();
let firstPoint = true;
values.forEach((value, index) => {
const actualValue = value !== null ? value : 1;
const normalizedValue = (actualValue - 1) / 4;
const radius = normalizedValue * maxRadius;
const angle = axes[index].angle;
const x = centerX + Math.cos(angle) * radius;
const y = centerY + Math.sin(angle) * radius;
if (firstPoint) {
ctx.moveTo(x, y);
firstPoint = false;
} else {
ctx.lineTo(x, y);
}
});
ctx.closePath();
ctx.fillStyle = '#8b5cf6' + '33';
ctx.fill();
ctx.strokeStyle = '#8b5cf6';
ctx.lineWidth = 2;
ctx.stroke();
values.forEach((value, index) => {
if (value !== null) {
const normalizedValue = (value - 1) / 4;
const radius = normalizedValue * maxRadius;
const angle = axes[index].angle;
const x = centerX + Math.cos(angle) * radius;
const y = centerY + Math.sin(angle) * radius;
ctx.beginPath();
ctx.arc(x, y, 4, 0, 2 * Math.PI);
ctx.fillStyle = '#8b5cf6';
ctx.fill();
ctx.strokeStyle = 'white';
ctx.lineWidth = 1.5;
ctx.stroke();
}
});
}
}
function updateStep() {
// Hide all steps
formSteps.forEach(step => {
step.classList.remove('active');
});
// Show current step
formSteps[currentStep].classList.add('active');
// Update progress bar
progressSteps.forEach((step, index) => {
step.classList.remove('active', 'completed');
if (index < currentStep) {
step.classList.add('completed');
} else if (index === currentStep) {
step.classList.add('active');
}
});
// Update buttons
prevBtn.style.display = currentStep === 0 ? 'none' : 'block';
if (currentStep === totalSteps) {
nextBtn.style.display = 'none';
// Show the original submit button
formContainer.classList.add('show-submit');
// Find and show the submit button's parent container
const submitBtn = document.querySelector('#wpRunQuery');
if (submitBtn) {
let parent = submitBtn.closest('.oo-ui-fieldLayout');
if (parent) {
parent.style.display = 'block';
}
}
} else {
nextBtn.style.display = 'block';
nextBtn.textContent = 'הבא ←';
formContainer.classList.remove('show-submit');
// Hide submit button
const submitBtn = document.querySelector('#wpRunQuery');
if (submitBtn) {
let parent = submitBtn.closest('.oo-ui-fieldLayout');
if (parent) {
parent.style.display = 'none';
}
}
}
// Update preview
drawPreview();
}
function validateCurrentStep() {
const currentStepEl = formSteps[currentStep];
const requiredInputs = currentStepEl.querySelectorAll('input[type="radio"][name^="q"]');
// Get unique question names
const questionNames = new Set();
requiredInputs.forEach(input => questionNames.add(input.name));
// Check if all questions are answered
for (let name of questionNames) {
const checked = currentStepEl.querySelector(`input[name="${name}"]:checked`);
if (!checked) {
return false;
}
}
return true;
}
nextBtn.addEventListener('click', function() {
if (currentStep === 0 || validateCurrentStep()) {
if (currentStep < totalSteps) {
currentStep++;
updateStep();
}
} else {
alert('אנא ענה על כל השאלות לפני המשך');
}
});
prevBtn.addEventListener('click', function() {
if (currentStep > 0) {
currentStep--;
updateStep();
}
});
// Listen to all radio button changes
document.addEventListener('change', function(e) {
if (e.target.type === 'radio' && e.target.name.startsWith('AIAssessment')) {
drawPreview();
}
});
// Also try with click events
document.addEventListener('click', function(e) {
if (e.target.type === 'radio' && e.target.name.startsWith('AIAssessment')) {
setTimeout(drawPreview, 100);
}
});
// Fallback: Poll for changes every 500ms
let lastValues = {};
setInterval(function() {
let changed = false;
for (let i = 1; i <= 5; i++) {
for (let j = 1; j <= 4; j++) {
const input = document.querySelector(`input[name="AIAssessment[q${i}_${j}]"]:checked`);
const key = `q${i}_${j}`;
const newValue = input ? input.value : null;
if (lastValues[key] !== newValue) {
lastValues[key] = newValue;
changed = true;
}
}
}
if (changed) {
drawPreview();
}
}, 500);
// Initialize - hide submit button on load
setTimeout(function() {
const submitBtn = document.querySelector('#wpRunQuery');
if (submitBtn) {
let parent = submitBtn.closest('.oo-ui-fieldLayout');
if (parent) {
parent.style.display = 'none';
}
}
updateStep();
drawPreview();
}, 100);
})();