<!DOCTYPE html>
<html lang="he" dir="rtl">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>סקר</title>
<style>
body {
font-family: "Alef", sans-serif;
background-color: #f5f6fa;
direction: rtl;
text-align: center;
padding: 30px;
}
h1 { color: #2f3640; }
.option { display: block; margin: 10px auto; text-align: right; max-width: 300px; }
button {
background-color: #40739e;
color: white;
padding: 10px 20px;
border: none;
border-radius: 6px;
cursor: pointer;
font-size: 16px;
margin-top: 20px;
}
button:hover { background-color: #487eb0; }
#results { max-width: 500px; margin: 40px auto; }
#otherText { display: none; margin-top: 8px; width: 80%; padding: 5px; }
</style>
</head>
<body>
<h1>שאלת הסקר</h1>
<div id="poll-container">
<form id="poll-form">
<label class="option"><input type="radio" name="choice" value="תשובה 1"> תשובה 1</label>
<label class="option"><input type="radio" name="choice" value="תשובנ 2"> תשובה 2</label>
<label class="option"><input type="radio" name="choice" value="תשובה 3"> תשובה 3</label>
<label class="option"><input type="radio" name="choice" value="תשובה 4"> תשובה 4</label>
<label class="option"><input type="radio" name="choice" value="תשוהה 5"> תשובה 5</label>
<label class="option"><input type="radio" name="choice" value="תשובה 6"> תשובה 6</label>
<label class="option"><input type="radio" name="choice" value="אחר" id="otherOption"> אחר:</label>
<input type="text" id="otherText" placeholder="כתוב תשובתך..." />
<button type="submit" style="font-size:18px; font-weight:bold; padding:10px 20px;">
שלח הצבעה<br>
<small style="font-size:12px; font-weight:normal;">שים ♥️ לאחר השליחה לא ניתן לשנות הצבעה</small>
</button>
</form>
</div>
<div id="results" style="display:none;">
<h2>תוצאות הסקר</h2>
<canvas id="resultsChart"></canvas>
</div>
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
<script>
const SCRIPT_URL = "URL לא apps script"; // החלף בקישור ה־Deploy שלך
const form = document.getElementById("poll-form");
const pollContainer = document.getElementById("poll-container");
const resultsDiv = document.getElementById("results");
const otherOption = document.getElementById("otherOption");
const otherText = document.getElementById("otherText");
document.querySelectorAll('input[name="choice"]').forEach(r => {
r.addEventListener('change', () => {
otherText.style.display = otherOption.checked ? 'block' : 'none';
});
});
form.addEventListener("submit", async (e) => {
e.preventDefault();
const selected = document.querySelector('input[name="choice"]:checked');
if (!selected) return alert("אנא בחר תשובה");
let answer = selected.value;
if (answer === "אחר") {
if (!otherText.value.trim()) return alert("אנא ציין תשובתך");
answer = otherText.value.trim();
}
try {
const res = await fetch(SCRIPT_URL, {
method: "POST",
body: JSON.stringify({ answer }),
headers: { "Content-Type": "application/json" },
});
const data = await res.json();
if (data.status !== "ok") throw new Error(data.message || "שגיאה בשליחה");
localStorage.setItem("voted", "true");
pollContainer.style.display = "none";
showResults();
} catch (err) {
alert("אירעה שגיאה בשליחה: " + err.message);
}
});
async function showResults() {
resultsDiv.style.display = "block";
try {
const res = await fetch(SCRIPT_URL);
const data = await res.json();
const labels = Object.keys(data);
const values = Object.values(data);
const ctx = document.getElementById("resultsChart").getContext("2d");
new Chart(ctx, {
type: "bar",
data: {
labels,
datasets: [{
label: "כמות הצבעות",
data: values,
backgroundColor: "rgba(64,115,158,0.7)"
}]
},
options: {
responsive: true,
plugins: { legend: { display: false } },
scales: { y: { beginAtZero: true } }
}
});
} catch (err) {
alert("לא ניתן לטעון תוצאות כרגע.");
}
}
if (localStorage.getItem("voted") === "true") {
pollContainer.style.display = "none";
showResults();
}
</script>
</body>
</html>