DinDersiOyun.com: Gruplar Yarışıyor Boş Şablon

26 Ekim 2025

Gruplar Yarışıyor Boş Şablon

Kendi sorularınızı yazıp kendi oyununuzu yapın.

BOŞ ŞABLONU İNCELE

NASIL YAPILIR?

Aşağıdaki kodu kopyalayıp bilgisayarda not defteri programıyla açtığınız text dosyasına yapıştırın

soruların olduğu şu satırı aşağılara inerek bulun.

{ q: "Soru 1", options: ["doğru", "yanlış 1", "yanlış 2", "yanlış 3"], a: 0 },

örnek:

{ q: "Peygamberimizin adı nedir?", options: ["Hz Muhammed (sav)", "Osman", "Murat", "Halil"], a: 0 },

Soru ve cevaplarınızı tırnakların içine yazın. ilk şıkka her zaman doğru cevabı yazın.

20 soruyu da yazdıktan sonra farklı kaydete tıklayıp text dosyasını index.html şeklinde masaüstüne kaydedin.

Dosyanın uzantısı mutlaka html olsun. masaüstündeki index.html dosyasını sağ tıklayıp istediğiniz internet

tarayıcısıyla (chrome, firefox opera vb) açabilirsiniz.

Alttaki kodu eksiksiz kopyalayın. Soruları ve cevapları yazarken bir tırnak bile yanlış olsa oyun açılmaz.

<!DOCTYPE html>
<html lang="tr">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Gruplar Yarışıyor</title>
<style>
/* Genel Ayarlar ve Modern Tasarım */
:root {
--bg-color: #f4f6f9;
--primary: #2c3e50;
--secondary: #3498db;
--accent: #f1c40f;
--success: #2ecc71;
--danger: #e74c3c;
--text-dark: #2c3e50;
--text-light: #ffffff;
}

body, html {
margin: 0; padding: 0; height: 100%;
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
background-color: var(--bg-color);
overflow: hidden;
user-select: none; /* Akıllı tahtada metin seçilmesini engeller */
}

#app {
display: flex; flex-direction: column; height: 100vh;
}

header {
background: var(--primary); color: var(--text-light);
padding: 15px; text-align: center; font-size: 2.2rem; font-weight: bold;
box-shadow: 0 4px 6px rgba(0,0,0,0.1); z-index: 10;
}

#turn-banner {
background: var(--accent); color: var(--text-dark);
font-size: 1.8rem; font-weight: bold; padding: 12px; text-align: center;
box-shadow: 0 2px 4px rgba(0,0,0,0.1); z-index: 9;
}

#main-content {
flex: 1; position: relative; display: flex; flex-direction: column;
align-items: center; justify-content: center; overflow: hidden; padding: 20px;
}

#scoreboard {
height: 100px; background: #ecf0f1; display: flex;
justify-content: space-around; align-items: center;
border-top: 4px solid #bdc3c7; z-index: 10; padding: 0 20px;
}

.view { display: none; width: 100%; max-width: 1200px; text-align: center; }

/* Butonlar ve Girdiler */
h2 { font-size: 2.5rem; color: var(--primary); margin-bottom: 20px; }
input[type="number"] {
font-size: 2rem; padding: 15px; width: 120px; text-align: center;
margin: 20px; border-radius: 10px; border: 3px solid #bdc3c7; outline: none;
}
.btn-large {
font-size: 1.8rem; padding: 15px 40px; cursor: pointer; border: none;
border-radius: 10px; background: var(--secondary); color: white;
transition: 0.2s; box-shadow: 0 4px 6px rgba(0,0,0,0.2); font-weight: bold;
}
.btn-large:hover { transform: scale(1.05); background: #2980b9; }
.btn-large:disabled { background: #95a5a6; cursor: not-allowed; transform: none; }

/* Çark Tasarımı */
.wheel-wrapper {
position: relative; width: 450px; height: 450px; margin: 0 auto 30px auto;
}
.wheel {
width: 100%; height: 100%; border-radius: 50%;
border: 8px solid var(--primary); box-sizing: border-box;
transition: transform 4s cubic-bezier(0.17, 0.67, 0.1, 1.1);
position: relative; overflow: hidden; box-shadow: 0 10px 25px rgba(0,0,0,0.3);
}
.wheel-pointer {
position: absolute; top: 50%; right: -30px; transform: translateY(-50%);
border-top: 25px solid transparent; border-bottom: 25px solid transparent;
border-right: 50px solid var(--danger); z-index: 10;
filter: drop-shadow(-3px 0px 3px rgba(0,0,0,0.4));
}
.wheel-slice-text {
position: absolute; top: 50%; left: 50%; width: 50%; height: 40px;
margin-top: -20px; transform-origin: 0 50%; text-align: right;
padding-right: 35px; font-weight: bold; font-size: 28px; color: white;
text-shadow: 2px 2px 5px rgba(0,0,0,0.8); box-sizing: border-box;
display: flex; align-items: center; justify-content: flex-end;
}
.wheel-center-dot {
position: absolute; top: 50%; left: 50%; width: 40px; height: 40px;
background: var(--primary); border-radius: 50%;
transform: translate(-50%, -50%); z-index: 5;
}

/* Kutu Izgarası (Grid) */
.grid-container {
display: grid; grid-template-columns: repeat(5, 1fr); gap: 20px;
width: 100%; max-width: 1100px; margin: 0 auto;
}
.grid-box {
background: #e67e22; color: white; font-size: 3rem; font-weight: bold;
padding: 30px 0; border-radius: 15px; cursor: pointer; transition: 0.3s;
box-shadow: 0 6px 12px rgba(0,0,0,0.2); border: 4px solid #d35400;
}
.grid-box:hover { transform: translateY(-5px) scale(1.03); background: #d35400; }
.grid-box.opened {
background: #bdc3c7; color: #7f8c8d; border-color: #95a5a6;
cursor: not-allowed; transform: none; box-shadow: none;
}

/* Soru Ekranı */
.question-box {
font-size: 2.2rem; margin-bottom: 30px; color: var(--primary);
padding: 30px; background: white; border-radius: 15px;
box-shadow: 0 5px 15px rgba(0,0,0,0.1); border-left: 8px solid var(--secondary);
min-height: 120px; display: flex; align-items: center; justify-content: center;
}
.options-grid {
display: grid; grid-template-columns: 1fr 1fr; gap: 20px;
width: 100%; max-width: 1000px; margin: 0 auto;
}
.option-btn {
font-size: 1.8rem; padding: 25px 20px; background: white; color: var(--primary);
border: 4px solid #bdc3c7; border-radius: 12px; text-align: left;
transition: 0.2s; display: flex; align-items: center; font-weight: 500; cursor: pointer;
}
.option-btn:hover:not(:disabled) { border-color: var(--secondary); background: #f0f8ff; }
.option-btn.correct { background: var(--success) !important; color: white !important; border-color: #27ae60 !important; }
.option-btn.wrong { background: var(--danger) !important; color: white !important; border-color: #c0392b !important; }

/* Geri Bildirim ve Skorboard */
#feedback-msg { font-size: 2.2rem; font-weight: bold; margin-top: 30px; min-height: 50px; }
.text-success { color: var(--success); }
.text-error { color: var(--danger); }

.group-score {
font-size: 1.8rem; padding: 15px 30px; background: white; border-radius: 10px;
box-shadow: 0 3px 6px rgba(0,0,0,0.1); border-bottom: 6px solid #ccc;
font-weight: bold; transition: 0.3s; opacity: 0.7;
}
.group-score.active {
border-color: var(--success); transform: scale(1.15); opacity: 1;
box-shadow: 0 8px 20px rgba(46, 204, 113, 0.4);
}
</style>
</head>
<body>

<div id="app">
<header>Gruplar Yarışıyor</header>
<div id="turn-banner" style="display: none;">Hoş Geldiniz!</div>

<div id="main-content">
<div id="setup-view" class="view" style="display: block;">
<h2>Yarışmaya Başlamadan Önce</h2>
<p style="font-size: 1.8rem; color: #555;">Lütfen yarışacak grup sayısını belirleyin (En az 2)</p>
<input type="number" id="group-count" value="2" min="2" max="10">
<br>
<button class="btn-large" onclick="initGame()">Oyunu Başlat</button>
</div>

<div id="wheel-view" class="view">
<div class="wheel-wrapper">
<div class="wheel-pointer"></div>
<div class="wheel" id="wheel"></div>
<div class="wheel-center-dot"></div>
</div>
<button id="spin-btn" class="btn-large" onclick="spinWheel()">Puan Çarkını Çevir</button>
</div>

<div id="grid-view" class="view">
<div class="grid-container" id="grid-container"></div>
</div>

<div id="question-view" class="view">
<div class="question-box" id="question-text">Soru buraya gelecek...</div>
<div class="options-grid" id="options-grid"></div>
<div id="feedback-msg"></div>
</div>

<div id="end-view" class="view">
<h2 style="font-size: 4rem; color: #2ecc71;">Yarışma Sona Erdi!</h2>
<div id="end-message" style="font-size: 3rem; margin: 30px 0; font-weight: bold;"></div>
<button class="btn-large" onclick="location.reload()">Yeni Oyun Başlat</button>
</div>
</div>

<div id="scoreboard"></div>
</div>

<script>
// --- 1. SORU HAVUZU (SİYER - 20 Soru) ---
const rawQuestions = [
{ q: "Soru 1", options: ["doğru", "yanlış 1", "yanlış 2", "yanlış 3"], a: 0 },
{ q: "Soru 2", options: ["doğru", "yanlış 1", "yanlış 2", "yanlış 3"], a: 0 },
{ q: "Soru 3", options: ["doğru", "yanlış 1", "yanlış 2", "yanlış 3"], a: 0 },
{ q: "Soru 4", options: ["doğru", "yanlış 1", "yanlış 2", "yanlış 3"], a: 0 },
{ q: "Soru 5", options: ["doğru", "yanlış 1", "yanlış 2", "yanlış 3"], a: 0 },
{ q: "Soru 6", options: ["doğru", "yanlış 1", "yanlış 2", "yanlış 3"], a: 0 },
{ q: "Soru 7", options: ["doğru", "yanlış 1", "yanlış 2", "yanlış 3"], a: 0 },
{ q: "Soru 8", options: ["doğru", "yanlış 1", "yanlış 2", "yanlış 3"], a: 0 },
{ q: "Soru 9", options: ["doğru", "yanlış 1", "yanlış 2", "yanlış 3"], a: 0 },
{ q: "Soru 10", options: ["doğru", "yanlış 1", "yanlış 2", "yanlış 3"], a: 0 },
{ q: "Soru 11", options: ["doğru", "yanlış 1", "yanlış 2", "yanlış 3"], a: 0 },
{ q: "Soru 12", options: ["doğru", "yanlış 1", "yanlış 2", "yanlış 3"], a: 0 },
{ q: "Soru 13", options: ["doğru", "yanlış 1", "yanlış 2", "yanlış 3"], a: 0 },
{ q: "Soru 14", options: ["doğru", "yanlış 1", "yanlış 2", "yanlış 3"], a: 0 },
{ q: "Soru 15", options: ["doğru", "yanlış 1", "yanlış 2", "yanlış 3"], a: 0 },
{ q: "Soru 16", options: ["doğru", "yanlış 1", "yanlış 2", "yanlış 3"], a: 0 },
{ q: "Soru 17", options: ["doğru", "yanlış 1", "yanlış 2", "yanlış 3"], a: 0 },
{ q: "Soru 18", options: ["doğru", "yanlış 1", "yanlış 2", "yanlış 3"], a: 0 },
{ q: "Soru 19", options: ["doğru", "yanlış 1", "yanlış 2", "yanlış 3"], a: 0 },
{ q: "Soru 20", options: ["doğru", "yanlış 1", "yanlış 2", "yanlış 3"], a: 0 }
];

// --- 2. ÇARK AYARLARI ---
const wheelValues = [45, 50, 55, 60, 65, 70, 75, 80, 85, 90, 95, 100];
const wheelColors = ["#e74c3c", "#f1c40f", "#2ecc71", "#3498db", "#9b59b6", "#e67e22", "#1abc9c", "#34495e", "#ff9ff3", "#feca57", "#ff6b6b", "#48dbfb"];
let currentWheelRotation = 0;

// --- 3. OYUN DEĞİŞKENLERİ ---
let numGroups = 2;
let groups = [];
let currentGroupIndex = 0;
let currentPoints = 0;
let boxes = [];
let currentBoxIndex = -1;
let currentCorrectIndex = -1; // Karıştırılmış şıklar içindeki doğru indeks

// Arayüz Değiştirme
function switchView(viewId) {
document.querySelectorAll('.view').forEach(v => v.style.display = 'none');
document.getElementById(viewId).style.display = 'block';
}

// Çarkı Çizdirme
function setupWheel() {
const wheelEl = document.getElementById('wheel');
let gradientParts = [];

for(let i=0; i<12; i++) {
let startAngle = i * 30;
let endAngle = (i+1) * 30;
gradientParts.push(`${wheelColors[i]} ${startAngle}deg ${endAngle}deg`);

let textEl = document.createElement('div');
textEl.className = 'wheel-slice-text';
textEl.style.transform = `rotate(${i*30 + 15}deg)`;
textEl.innerText = wheelValues[i];
wheelEl.appendChild(textEl);
}
wheelEl.style.background = `conic-gradient(from 90deg, ${gradientParts.join(', ')})`;
}

// --- 4. OYUNU BAŞLATMA ---
function initGame() {
numGroups = parseInt(document.getElementById('group-count').value);
if(isNaN(numGroups) || numGroups < 2) numGroups = 2;

for(let i=0; i<numGroups; i++) {
groups.push({ name: (i+1) + ". Grup", score: 0 });
}

currentGroupIndex = Math.floor(Math.random() * numGroups);

const shuffledQuestions = [...rawQuestions].sort(() => Math.random() - 0.5);
boxes = shuffledQuestions.map((q, i) => ({ id: i + 1, question: q, opened: false }));

document.getElementById('turn-banner').style.display = 'block';
setupWheel();
renderScoreboard();
startTurn();
}

// --- 5. TUR DÖNGÜSÜ ---
function startTurn() {
document.getElementById('turn-banner').innerText = `Sıra: ${groups[currentGroupIndex].name} - Önce Puan Çarkını Çevirin!`;
document.getElementById('spin-btn').disabled = false;
renderScoreboard();
switchView('wheel-view');
}

function spinWheel() {
document.getElementById('spin-btn').disabled = true;

const randomIndex = Math.floor(Math.random() * 12);
const selectedValue = wheelValues[randomIndex];

const targetRelativeAngle = 360 - (randomIndex * 30 + 15);
const spins = 5;
const nextBase = Math.ceil(currentWheelRotation / 360) * 360;

currentWheelRotation = nextBase + (spins * 360) + targetRelativeAngle;
document.getElementById('wheel').style.transform = `rotate(${currentWheelRotation}deg)`;

setTimeout(() => {
currentPoints = selectedValue;
document.getElementById('turn-banner').innerText = `${groups[currentGroupIndex].name} - Bu Soru ${currentPoints} Puan Değerinde! Lütfen Kutu Seçin.`;
renderGrid();
switchView('grid-view');
}, 4100);
}

function renderGrid() {
const container = document.getElementById('grid-container');
container.innerHTML = '';
boxes.forEach((box, i) => {
let div = document.createElement('div');
div.className = 'grid-box ' + (box.opened ? 'opened' : '');
div.innerText = box.id;
div.onclick = () => { if(!box.opened) openBox(i); };
container.appendChild(div);
});
}

function openBox(index) {
currentBoxIndex = index;
const qData = boxes[index].question;
const correctAnswerText = qData.options[qData.a];

// Şıkları karıştır
let shuffledOptions = [...qData.options].sort(() => Math.random() - 0.5);
currentCorrectIndex = shuffledOptions.indexOf(correctAnswerText);

document.getElementById('question-text').innerText = qData.q;
const optionsGrid = document.getElementById('options-grid');
optionsGrid.innerHTML = '';
document.getElementById('feedback-msg').innerHTML = '';

const labels = ["A) ", "B) ", "C) ", "D) "];
shuffledOptions.forEach((opt, optIndex) => {
let btn = document.createElement('button');
btn.className = 'option-btn';
btn.innerText = labels[optIndex] + opt;
btn.onclick = () => checkAnswer(optIndex, opt);
optionsGrid.appendChild(btn);
});

document.getElementById('turn-banner').innerText = `${groups[currentGroupIndex].name} Yanıtlıyor (${currentPoints} Puan)`;
switchView('question-view');
}

function checkAnswer(selectedIndex, selectedText) {
const btns = document.querySelectorAll('.option-btn');
btns.forEach(b => b.disabled = true);

const isCorrect = (selectedIndex === currentCorrectIndex);
const feedbackEl = document.getElementById('feedback-msg');

btns[currentCorrectIndex].classList.add('correct');

if(isCorrect) {
groups[currentGroupIndex].score += currentPoints;
feedbackEl.innerHTML = `<span class="text-success">Tebrikler! Doğru cevap verdiniz ve ${currentPoints} puan kazandınız.</span>`;
} else {
btns[selectedIndex].classList.add('wrong');
feedbackEl.innerHTML = `<span class="text-error">Yanlış cevap. Doğru yanıt: ${btns[currentCorrectIndex].innerText}. Puanınız silinmedi.</span>`;
}

boxes[currentBoxIndex].opened = true;
renderScoreboard();

setTimeout(() => {
if(boxes.filter(b => !b.opened).length === 0) {
endGame();
} else {
currentGroupIndex = (currentGroupIndex + 1) % numGroups;
startTurn();
}
}, 4000);
}

function renderScoreboard() {
const board = document.getElementById('scoreboard');
board.innerHTML = '';
groups.forEach((g, i) => {
let div = document.createElement('div');
div.className = 'group-score ' + (i === currentGroupIndex ? 'active' : '');
div.innerText = `${g.name}: ${g.score} Puan`;
board.appendChild(div);
});
}

function endGame() {
document.getElementById('turn-banner').style.display = 'none';

let maxScore = -1;
let winners = [];
groups.forEach(g => {
if(g.score > maxScore) { maxScore = g.score; winners = [g.name]; }
else if(g.score === maxScore) { winners.push(g.name); }
});

let msg = winners.length > 1
? `Berabere! Kazananlar: ${winners.join(', ')} <br> Skor: ${maxScore} Puan`
: `Şampiyon: ${winners[0]}! <br> Toplam: ${maxScore} Puan`;

document.getElementById('end-message').innerHTML = msg;
switchView('end-view');
}
</script>

</body>
</html>

Hiç yorum yok:

Yorum Gönder

Yorumunuz en kısa sürede yayınlanacaktır.