dfr

<!DOCTYPE html>
<html lang="si">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>ICT තාර්කික ද්වාර Game</title>
    <style>
        * { box-sizing: border-box; margin: 0; padding: 0; }
        body { font-family: 'Segoe UI', Arial, sans-serif; background: linear-gradient(135deg, #2c3e50, #2980b9); display: flex; justify-content: center; align-items: center; min-height: 100vh; padding: 15px; }
        .container { width: 100%; max-width: 420px; background: white; padding: 25px; border-radius: 20px; box-shadow: 0 10px 25px rgba(0,0,0,0.3); text-align: center; }
        h1 { font-size: 22px; color: #2980b9; margin-bottom: 5px; }
        .timer-bar { font-size: 18px; font-weight: bold; color: #e74c3c; margin: 10px 0; }
        .question { font-size: 18px; font-weight: bold; margin: 15px 0; color: #2c3e50; min-height: 70px; display: flex; justify-content: center; align-items: center; line-height: 1.4; }
        .options { display: flex; flex-direction: column; gap: 10px; width: 100%; }
        button { width: 100%; padding: 14px; font-size: 16px; font-weight: bold; cursor: pointer; border: 2px solid #ddd; border-radius: 12px; background-color: #f9f9f9; transition: 0.2s; -webkit-tap-highlight-color: transparent; }
        button:active { transform: scale(0.98); }
        .score-board { margin-top: 20px; font-size: 15px; font-weight: bold; display: flex; justify-content: space-between; padding: 12px; background: #f0f2f5; border-radius: 10px; color: #333; }
        .feedback { font-size: 16px; font-weight: bold; margin-top: 15px; min-height: 25px; }
        .correct { color: #2ecc71; }
        .wrong { color: #e74c3c; }
        .btn-correct { background-color: #2ecc71 !important; color: white; border-color: #27ae60; }
        .btn-wrong { background-color: #e74c3c !important; color: white; border-color: #c0392b; }
        
        .leaderboard { margin-top: 20px; background: #f9f9f9; padding: 15px; border-radius: 12px; border: 1px solid #ddd; text-align: left; }
        .leaderboard h3 { font-size: 16px; color: #2980b9; margin-bottom: 10px; text-align: center; display: flex; justify-content: center; align-items: center; gap: 5px; }
        .leaderboard ol { padding-left: 20px; font-size: 14px; color: #333; }
        .leaderboard li { margin-bottom: 5px; font-weight: 600; }
        .input-section { margin: 15px 0; }
        .input-section input { width: 80%; padding: 10px; font-size: 16px; border: 2px solid #ddd; border-radius: 8px; text-align: center; margin-bottom: 10px; }
    </style>
</head>
<body>

<div class="container" id="game-container">
    <h1>🔌 තාර්කික ද්වාර (Logic Gates)</h1>
    <div class="timer-bar" id="timer-area">⏱️ කාලය: <span id="time">20</span>s</div>
    
    <div id="quiz-area">
        <div class="question" id="question">ප්‍රශ්නය මෙතන දිස්වේ...</div>
        <div class="options" id="options"></div>
        <div class="feedback" id="feedback"></div>
    </div>

    <div class="score-board" id="stats-area">
        <div>ලකුණු: <span id="score">0</span></div>
        <div>ප්‍රශ්න: <span id="total">0</span>/15</div>
    </div>
</div>

<script>
    const questions = [
        { q: "සියලුම ප්‍රතිදානයන් (Inputs) 1 වූ විට පමණක් ප්‍රතිදානය (Output) 1 වන මූලික ද්වාරය කුමක්ද?", a: "AND ද්වාරය", o: ["AND ද්වාරය", "OR ද්වාරය", "NOT ද්වාරය", "NAND ද්වාරය"] },
        { q: "NOT ද්වාරයකට ලබා දිය හැකි උපරිම ප්‍රතිදාන (Inputs) ගණන කීයද?", a: "1", o: ["1", "2", "3", "ඕනෑම ගණනක්"] },
        { q: "AND ද්වාරයක් ඉදිරියට NOT ද්වාරයක් සම්බන්ධ කිරීමෙන් ලැබෙන සාර්ව ද්වාරය (Universal Gate) කුමක්ද?", a: "NAND ද්වාරය", o: ["NAND ද්වාරය", "NOR ද්වාරය", "XOR ද්වාරය", "XNOR ද්වාරය"] },
        { q: "OR ද්වාරයක ප්‍රතිදානය (Output) 0 වීමට නම් ප්‍රතිදානයන් (Inputs) පැවතිය යුත්තේ කෙසේද?", a: "සියලුම ප්‍රතිදාන 0 විය යුතුය", o: ["සියලුම ප්‍රතිදාන 0 විය යුතුය", "සියලුම ප්‍රතිදාන 1 විය යුතුය", "එක් ප්‍රතිදානයක් පමණක් 0 විය යුතුය", "එක් ප්‍රතිදානයක් පමණක් 1 විය යුතුය"] },
        { q: "NAND ද්වාරයක Inputs දෙකම 1 වුවහොත් Output එක කුමක්ද?", a: "0", o: ["0", "1", "වෙනස් වේ", "නිශ්චිත නැත"] },
        { q: "ප්‍රතිදානයන් (Inputs) අසමාන වූ විට පමණක් ප්‍රතිදානය (Output) 1 වන විශේෂ ද්වාරය කුමක්ද?", a: "XOR ද්වාරය", o: ["XOR ද්වාරය", "XNOR ද්වාරය", "NOR ද්වාරය", "OR ද්වාරය"] },
        { q: "NOR ද්වාරයක Inputs දෙකම 0 වුවහොත් Output එක කුමක්ද?", a: "1", o: ["0", "1", "2", "ප්‍රකාශ කළ නොහැක"] },
        { q: "පහත දැක්වෙන ද්වාර වලින් 'සාර්ව ද්වාරයක්' (Universal Gate) නොවන්නේ කුමක්ද?", a: "XOR ද්වාරය", o: ["NAND ද්වාරය", "NOR ද්වාරය", "XOR ද්වාරය", "සියල්ලම සාර්ව ද්වාර වේ"] },
        { q: "ප්‍රතිදානයන් (Inputs) සමාන වූ විට (0,0 හෝ 1,1) ප්‍රතිදානය (Output) 1 වන ද්වාරය කුමක්ද?", a: "XNOR ද්වාරය", o: ["XOR ද්වාරය", "XNOR ද්වාරය", "AND ද්වාරය", "OR ද්වාරය"] },
        { q: "NOT ද්වාරයකට 0ක් ඇතුළත් කළ විට ලැබෙන ප්‍රතිදානය කුමක්ද?", a: "1", o: ["0", "1", "-1", "ප්‍රතිදානයක් නොලැබේ"] },
        { q: "A සහ B යනු Inputs නම්, A . B (A dot B) මඟින් නිරූපණය වන්නේ කුමන ද්වාරයද?", a: "AND ද්වාරය", o: ["AND ද්වාරය", "OR ද්වාරය", "NAND ද්වාරය", "NOR ද්වාරය"] },
        { q: "A + B මඟින් නිරූපණය වන බූලීය ප්‍රකාශනය (Boolean Expression) අයත් ද්වාරය කුමක්ද?", a: "OR ද්වාරය", o: ["AND ද්වාරය", "OR ද්වාරය", "XOR ද්වාරය", "NOR ද්වාරය"] },
        { q: "ද්වාරයක ඇති Inputs ගණන n නම්, එහි සත්‍යතා වගුවේ (Truth Table) තිබිය හැකි සංයෝජන (Combinations) ගණන සෙවීමේ සූත්‍රය කුමක්ද?", a: "2^n", o: ["n^2", "2^n", "2n", "n+2"] },
        { q: "Inputs 3ක් ඇති AND ද්වාරයක සත්‍යතා වගුවේ ඇති මුළු පේළි (Rows) ගණන කීයද?", a: "8", o: ["4", "6", "8", "9"] },
        { q: "ඩිමෝගන්ගේ (De Morgan's) පළමු නියමයට අනුව (A + B) හි බාර් එක (Whole Bar) සමාන වන්නේ කුමකටද?", a: "A' . B'", o: ["A' + B'", "A' . B'", "A . B", "A + B"] }
    ];

    let currentQ = 0, score = 0, timer, timeLeft = 20, canClick = true;

    function startTimer() {
        timeLeft = 20;
        document.getElementById("time").innerText = timeLeft;
        clearInterval(timer);
        timer = setInterval(() => {
            timeLeft--;
            document.getElementById("time").innerText = timeLeft;
            if (timeLeft <= 0) {
                clearInterval(timer);
                timeOut();
            }
        }, 1000);
    }

    function loadQuestion() {
        if (currentQ >= questions.length) {
            clearInterval(timer);
            showEndScreen();
            return;
        }

        canClick = true;
        startTimer();
        
        let qData = questions[currentQ];
        document.getElementById("question").innerText = qData.q;
        let optionsDiv = document.getElementById("options");
        optionsDiv.innerHTML = "";
        
        let shuffledOptions = [...qData.o].sort(() => Math.random() - 0.5);
        
        shuffledOptions.forEach(opt => {
            let btn = document.createElement("button");
            btn.innerText = opt;
            btn.onclick = () => checkAnswer(btn, opt);
            optionsDiv.appendChild(btn);
        });
        document.getElementById("feedback").innerText = "";
    }

    function checkAnswer(selectedBtn, answer) {
        if (!canClick) return;
        canClick = false;
        clearInterval(timer);
        
        let feedback = document.getElementById("feedback");
        let correctAnswer = questions[currentQ].a;
        
        if (answer === correctAnswer) {
            score++;
            selectedBtn.classList.add("btn-correct");
            feedback.innerText = "✓ පිළිතුර නිවැරදියි!";
            feedback.className = "feedback correct";
        } else {
            selectedBtn.classList.add("btn-wrong");
            feedback.innerText = "✗ පිළිතුර වැරදියි!";
            feedback.className = "feedback wrong";
            
            Array.from(document.getElementById("options").children).forEach(btn => {
                if (btn.innerText === correctAnswer) btn.classList.add("btn-correct");
            });
        }
        
        updateStats();
    }

    function timeOut() {
        canClick = false;
        let feedback = document.getElementById("feedback");
        let correctAnswer = questions[currentQ].a;
        feedback.innerText = "⏱️ කාලය අවසන්! නිවැරදි පිළිතුර: " + correctAnswer;
        feedback.className = "feedback wrong";
        
        Array.from(document.getElementById("options").children).forEach(btn => {
            if (btn.innerText === correctAnswer) btn.classList.add("btn-correct");
        });
        
        updateStats();
    }

    function updateStats() {
        currentQ++;
        document.getElementById("score").innerText = score;
        document.getElementById("total").innerText = currentQ;
        setTimeout(loadQuestion, 2000);
    }

    function showEndScreen() {
        document.getElementById("timer-area").style.display = "none";
        document.getElementById("stats-area").style.display = "none";
        
        let container = document.getElementById("game-container");
        container.innerHTML = `
            <h1>🎮 ක්‍රීඩාව අවසන්!</h1>
            <p style="font-size:18px; margin:15px 0;">ඔබේ ලකුණු සංඛ්‍යාව: <b style="color:#2980b9; font-size:24px;">${score} / 15</b></p>
            
            <div class="input-section">
                <input type="text" id="playerName" placeholder="ඔබේ නම ඇතුළත් කරන්න" maxlength="15">
                <button onclick="saveScore()" style="background:#2980b9; color:white;">ලකුණු සුරකින්න</button>
            </div>
            
            <div class="leaderboard">
                <h3>🏆 හොඳම දක්ෂතා (Top Scores)</h3>
                <ol id="leaderboard-list"></ol>
            </div>
            
            <button onclick="location.reload()" style="background:#333; color:white; margin-top:15px;">නැවත මුල සිට සෙල්ලම් කරන්න</button>
        `;
        displayLeaderboard();
    }

    function saveScore() {
        let nameInput = document.getElementById("playerName");
        let name = nameInput.value.trim() || "Anonymous";
        
        let highScores = JSON.parse(localStorage.getItem("gates_high_scores")) || [];
        highScores.push({ name: name, score: score });
        
        highScores.sort((a, b) => b.score - a.score);
        highScores = highScores.slice(0, 5);
        
        localStorage.setItem("gates_high_scores", JSON.stringify(highScores));
        nameInput.parentElement.style.display = "none";
        displayLeaderboard();
    }

    function displayLeaderboard() {
        let highScores = JSON.parse(localStorage.getItem("gates_high_scores")) || [];
        let listHtml = highScores.map(entry => `<li>${entry.name} — ${entry.score} / 15</li>`).join("");
        document.getElementById("leaderboard-list").innerHTML = listHtml || "<li>තවමත් වාර්තා තබා නැත.</li>";
    }

    loadQuestion();
</script>

</body>
</html>


Provide feedback

Saved searches

Use saved searches to filter your results more quickly

dfr #314

🔌 තාර්කික ද්වාර (Logic Gates)

🎮 ක්‍රීඩාව අවසන්!

🏆 හොඳම දක්ෂතා (Top Scores)

Metadata

Assignees

Labels

Type

Fields

Projects

Milestone

Relationships

Development

dfr #314

Description

🔌 තාර්කික ද්වාර (Logic Gates)

🎮 ක්‍රීඩාව අවසන්!

🏆 හොඳම දක්ෂතා (Top Scores)

Metadata

Metadata

Assignees

Labels

Type

Fields

Projects

Milestone

Relationships

Development

Issue actions