Bilişim Sınıfı Çalışmaları 6.Ders - Computer Science Class Activities, Lesson 6
5.Sınıf:
6.Sınıf:
Etkinlik Materyallerine Ulaşmak İçin Tıkla
Etik ve Güvenlik Oyunu Html Kodları:
<!DOCTYPE html>
<html lang="tr">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>5. Sınıf Bilişim Teknolojileri - Etik ve Güvenlik Etkinlik Portalı</title>
<style>
:root {
--primary: #4A90E2;
--primary-dark: #2C3E50;
--secondary: #2ECC71;
--warning: #F39C12;
--danger: #E74C3C;
--bg: #F4F7F6;
--card-bg: #FFFFFF;
--text: #2C3E50;
}
* {
box-sizing: border-box;
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
margin: 0;
padding: 0;
}
body {
background-color: var(--bg);
color: var(--text);
line-height: 1.6;
padding: 20px;
}
.container {
max-width: 1000px;
margin: 0 auto;
}
header {
background: linear-gradient(135deg, #1e3c72 0%, #2a5298 100%);
color: white;
padding: 30px 20px;
border-radius: 15px;
text-align: center;
box-shadow: 0 8px 20px rgba(0,0,0,0.15);
margin-bottom: 25px;
}
header h1 {
font-size: 2.2rem;
margin-bottom: 8px;
}
header p {
font-size: 1.1rem;
opacity: 0.9;
}
.score-board {
background: white;
padding: 15px 25px;
border-radius: 12px;
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 25px;
box-shadow: 0 4px 10px rgba(0,0,0,0.05);
font-weight: bold;
font-size: 1.2rem;
}
.score-badge {
background: var(--secondary);
color: white;
padding: 8px 18px;
border-radius: 20px;
}
.nav-tabs {
display: flex;
gap: 10px;
margin-bottom: 25px;
flex-wrap: wrap;
}
.tab-btn {
flex: 1;
min-width: 140px;
padding: 12px 15px;
border: none;
background: #e0e0e0;
color: #555;
font-weight: bold;
border-radius: 10px;
cursor: pointer;
transition: all 0.3s;
text-align: center;
}
.tab-btn.active {
background: var(--primary);
color: white;
transform: translateY(-2px);
box-shadow: 0 4px 12px rgba(74, 144, 226, 0.4);
}
.tab-content {
display: none;
background: white;
padding: 30px;
border-radius: 15px;
box-shadow: 0 5px 15px rgba(0,0,0,0.08);
margin-bottom: 25px;
}
.tab-content.active {
display: block;
animation: fadeIn 0.4s ease-in-out;
}
@keyframes fadeIn {
from { opacity: 0; transform: translateY(10px); }
to { opacity: 1; transform: translateY(0); }
}
h2 {
color: var(--primary-dark);
margin-bottom: 15px;
border-bottom: 3px solid var(--primary);
padding-bottom: 8px;
display: inline-block;
}
.instruction {
background: #eef6ff;
border-left: 5px solid var(--primary);
padding: 12px 15px;
margin-bottom: 20px;
border-radius: 0 8px 8px 0;
font-size: 0.95rem;
}
.item-card {
background: #f9f9f9;
border: 1px solid #e2e2e2;
padding: 18px;
border-radius: 10px;
margin-bottom: 15px;
transition: 0.2s;
}
.btn-group {
display: flex;
gap: 10px;
margin-top: 12px;
flex-wrap: wrap;
}
.btn {
padding: 10px 20px;
border: none;
border-radius: 6px;
cursor: pointer;
font-weight: bold;
transition: 0.2s;
font-size: 0.95rem;
}
.btn-primary { background: var(--primary); color: white; }
.btn-secondary { background: var(--primary-dark); color: white; }
.btn-success { background: var(--secondary); color: white; }
.btn-danger { background: var(--danger); color: white; }
.btn-warning { background: var(--warning); color: white; }
.btn-outline { background: #fff; border: 2px solid #ccc; color: #333; }
.btn:hover { opacity: 0.9; transform: scale(1.02); }
.nav-controls {
display: flex;
justify-content: space-between;
margin-top: 30px;
padding-top: 20px;
border-top: 2px dashed #eee;
}
.feedback {
margin-top: 10px;
font-weight: bold;
padding: 8px;
border-radius: 6px;
display: none;
}
.feedback.correct {
display: block;
background: #d4edda;
color: #155724;
}
.feedback.wrong {
display: block;
background: #f8d7da;
color: #721c24;
}
select {
padding: 8px 12px;
border-radius: 6px;
border: 1px solid #ccc;
font-size: 0.95rem;
width: 100%;
max-width: 300px;
margin-top: 8px;
}
.password-checker {
background: #fafafa;
padding: 20px;
border-radius: 10px;
border: 1px solid #ddd;
}
.password-checker input {
width: 100%;
padding: 12px;
font-size: 1rem;
border: 2px solid #ccc;
border-radius: 8px;
margin-bottom: 10px;
}
.strength-meter {
height: 12px;
background: #eee;
border-radius: 6px;
overflow: hidden;
margin-bottom: 10px;
}
.strength-bar {
height: 100%;
width: 0%;
transition: width 0.3s, background-color 0.3s;
}
.rule-list {
list-style-type: none;
padding: 0;
margin-top: 10px;
}
.rule-list li {
font-size: 0.9rem;
margin-bottom: 5px;
color: #777;
}
.rule-list li.valid {
color: var(--secondary);
font-weight: bold;
}
.certificate {
text-align: center;
border: 8px double var(--primary-dark);
padding: 30px;
background: #fffdf5;
border-radius: 15px;
margin-top: 20px;
display: none;
}
.certificate h3 {
font-size: 2rem;
color: var(--primary-dark);
margin-bottom: 10px;
}
.certificate .student-name {
font-size: 1.5rem;
font-weight: bold;
color: var(--primary);
text-decoration: underline;
margin: 15px 0;
}
@media (max-width: 600px) {
.nav-tabs { flex-direction: column; }
.score-board { flex-direction: column; gap: 10px; text-align: center; }
.nav-controls { flex-direction: column; gap: 10px; }
.nav-controls .btn { width: 100%; }
}
</style>
</head>
<body>
<div class="container">
<header>
<h1>💻 5. Sınıf Bilişim Etiği ve Güvenlik Etkinliği</h1>
<p>İsa Gürbüz - Bilişim Teknolojileri Dersi İnteraktif Öğrenme Portalı</p>
</header>
<div class="score-board">
<span>Öğrenci Adı: <input type="text" id="studentNameInput" placeholder="Adınızı Yazınız" style="padding: 5px; border-radius: 5px; border: 1px solid #ccc;"></span>
<span>Toplam Puan: <span id="score" class="score-badge">0 / 100</span></span>
</div>
<div class="nav-tabs">
<button class="tab-btn active" onclick="switchTab(1)">1. Bilişim Etiği</button>
<button class="tab-btn" onclick="switchTab(2)">2. Dijital Vatandaşlık</button>
<button class="tab-btn" onclick="switchTab(3)">3. Dijital Oyunlar</button>
<button class="tab-btn" onclick="switchTab(4)">4. Şifre Güvenliği</button>
<button class="tab-btn" onclick="switchTab(5)">5. Güvenlik Testi</button>
</div>
<!-- TAB 1: ETİK VE ETİK DIŞI -->
<div id="tab1" class="tab-content active">
<h2>1. Bilişim Etiği</h2>
<div class="instruction">Aşağıdaki davranışları inceleyip doğru seçeneğe tıklayarak puan kazanın!</div>
<div class="item-card" id="e1">
<p><strong>1.</strong> Okul bilgisayar laboratuvarındaki klavye ve farelere zarar vermeden özenle kullanmak.</p>
<div class="btn-group">
<button class="btn btn-outline" onclick="checkEtik('e1', 'etik', 10)">Etik Davranış</button>
<button class="btn btn-outline" onclick="checkEtik('e1', 'etik-disi', 10)">Etik Dışı Davranış</button>
</div>
<div class="feedback"></div>
</div>
<div class="item-card" id="e2">
<p><strong>2.</strong> İnternette arkadaşımız hakkında asılsız ve yalan haberler yaymak.</p>
<div class="btn-group">
<button class="btn btn-outline" onclick="checkEtik('e2', 'etik', 10)">Etik Davranış</button>
<button class="btn btn-outline" onclick="checkEtik('e2', 'etik-disi', 10)">Etik Dışı Davranış</button>
</div>
<div class="feedback"></div>
</div>
<div class="item-card" id="e3">
<p><strong>3.</strong> Ücretli bir bilgisayar programını lisanssız (korsan) olarak indirip kullanmak.</p>
<div class="btn-group">
<button class="btn btn-outline" onclick="checkEtik('e3', 'etik', 10)">Etik Davranış</button>
<button class="btn btn-outline" onclick="checkEtik('e3', 'etik-disi', 10)">Etik Dışı Davranış</button>
</div>
<div class="feedback"></div>
</div>
<div class="item-card" id="e4">
<p><strong>4.</strong> Yanı başımızdaki arkadaşımızın bilgisayar ekranına ve kişisel dosyalarına izin almadan bakmak.</p>
<div class="btn-group">
<button class="btn btn-outline" onclick="checkEtik('e4', 'etik', 10)">Etik Davranış</button>
<button class="btn btn-outline" onclick="checkEtik('e4', 'etik-disi', 10)">Etik Dışı Davranış</button>
</div>
<div class="feedback"></div>
</div>
<div class="nav-controls">
<div></div>
<button class="btn btn-primary" onclick="switchTab(2)">Sonraki Menü: Dijital Vatandaşlık ➡️</button>
</div>
</div>
<!-- TAB 2: DİJİTAL VATANDAŞLIK -->
<div id="tab2" class="tab-content">
<h2>2. Dijital Vatandaşlık</h2>
<div class="instruction">Aşağıdaki durumların hangi e-Hizmet kapsamına girdiğini doğru seçin.</div>
<div class="item-card" id="dv1">
<p><strong>1.</strong> Okul sınav notlarımızı ve devamsızlık durumumuzu internetten kontrol etmek:</p>
<select id="sel_dv1" onchange="checkMatch('dv1', 'e-okul', 10)">
<option value="">-- Seçiniz --</option>
<option value="e-devlet">e-Devlet</option>
<option value="e-okul">e-Okul</option>
<option value="e-randevu">e-Randevu (MHRS)</option>
<option value="e-ticaret">e-Ticaret</option>
</select>
<div class="feedback"></div>
</div>
<div class="item-card" id="dv2">
<p><strong>2.</strong> Hastaneye gitmeden önce internetten doktordan muayene sırası almak:</p>
<select id="sel_dv2" onchange="checkMatch('dv2', 'e-randevu', 10)">
<option value="">-- Seçiniz --</option>
<option value="e-devlet">e-Devlet</option>
<option value="e-okul">e-Okul</option>
<option value="e-randevu">e-Randevu (MHRS)</option>
<option value="e-ticaret">e-Ticaret</option>
</select>
<div class="feedback"></div>
</div>
<div class="item-card" id="dv3">
<p><strong>3.</strong> İnternet üzerinden güvenli sitelerden kitap veya spor ayakkabısı satın almak:</p>
<select id="sel_dv3" onchange="checkMatch('dv3', 'e-ticaret', 10)">
<option value="">-- Seçiniz --</option>
<option value="e-devlet">e-Devlet</option>
<option value="e-okul">e-Okul</option>
<option value="e-randevu">e-Randevu (MHRS)</option>
<option value="e-ticaret">e-Ticaret</option>
</select>
<div class="feedback"></div>
</div>
<div class="nav-controls">
<button class="btn btn-secondary" onclick="switchTab(1)">⬅️ Önceki Menü: Bilişim Etiği</button>
<button class="btn btn-primary" onclick="switchTab(3)">Sonraki Menü: Dijital Oyunlar ➡️</button>
</div>
</div>
<!-- TAB 3: DİJİTAL OYUNLAR -->
<div id="tab3" class="tab-content">
<h2>3. Dijital Oyunlar</h2>
<div class="instruction">Dijital oyunların olumlu ve olumsuz yönlerini ayırt edin.</div>
<div class="item-card" id="g1">
<p><strong>1.</strong> El-göz koordinasyonunu ve hızlı karar verme becerisini geliştirmek.</p>
<div class="btn-group">
<button class="btn btn-outline" onclick="checkOyun('g1', 'olumlu', 10)">Olumlu Yanı</button>
<button class="btn btn-outline" onclick="checkOyun('g1', 'olumsuz', 10)">Olumsuz Yanı</button>
</div>
<div class="feedback"></div>
</div>
<div class="item-card" id="g2">
<p><strong>2.</strong> Uzun süre oyun oynayarak derslere zaman ayıramamak ve vakit kaybı yaşamak.</p>
<div class="btn-group">
<button class="btn btn-outline" onclick="checkOyun('g2', 'olumlu', 10)">Olumlu Yanı</button>
<button class="btn btn-outline" onclick="checkOyun('g2', 'olumsuz', 10)">Olumsuz Yanı</button>
</div>
<div class="feedback"></div>
</div>
<div class="item-card" id="g3">
<p><strong>3.</strong> Bireyi gerçek dünyadan uzaklaştırıp yalnızlığa sürüklemesi.</p>
<div class="btn-group">
<button class="btn btn-outline" onclick="checkOyun('g3', 'olumlu', 10)">Olumlu Yanı</button>
<button class="btn btn-outline" onclick="checkOyun('g3', 'olumsuz', 10)">Olumsuz Yanı</button>
</div>
<div class="feedback"></div>
</div>
<div class="nav-controls">
<button class="btn btn-secondary" onclick="switchTab(2)">⬅️ Önceki Menü: Dijital Vatandaşlık</button>
<button class="btn btn-primary" onclick="switchTab(4)">Sonraki Menü: Şifre Güvenliği ➡️</button>
</div>
</div>
<!-- TAB 4: ŞİFRE GÜVENLİĞİ -->
<div id="tab4" class="tab-content">
<h2>4. Güçlü Şifre Test Laboratuvarı</h2>
<div class="instruction">Bir şifre yazarak ne kadar güçlü olduğunu test edin. Güçlü bir şifre kuralına uyup uymadığını görün!</div>
<div class="password-checker">
<label style="font-weight: bold; display: block; margin-bottom: 5px;">Test Etmek İstediğiniz Şifreyi Yazın:</label>
<input type="text" id="passInput" oninput="testPassword()" placeholder="Örn: TeKiN@4025">
<div class="strength-meter">
<div id="strengthBar" class="strength-bar"></div>
</div>
<p id="passStatus" style="font-weight: bold; font-size: 0.95rem;">Şifre Durumu: Henüz girilmedi</p>
<ul class="rule-list">
<li id="ruleLength">❌ En az 8 karakter uzunluğunda olmalı</li>
<li id="ruleUpper">❌ Büyük harf içermeli (A-Z)</li>
<li id="ruleLower">❌ Küçük harf içermeli (a-z)</li>
<li id="ruleNumber">❌ Rakam içermeli (0-9)</li>
<li id="ruleSymbol">❌ Özel simge/sembol içermeli (@, !, #, ?, vb.)</li>
</ul>
</div>
<div class="nav-controls">
<button class="btn btn-secondary" onclick="switchTab(3)">⬅️ Önceki Menü: Dijital Oyunlar</button>
<button class="btn btn-primary" onclick="switchTab(5)">Sonraki Menü: Güvenlik Testi ➡️</button>
</div>
</div>
<!-- TAB 5: GENEL DEĞERLENDİRME -->
<div id="tab5" class="tab-content">
<h2>5. Genel Güvenlik Testi ve Başarı Belgesi</h2>
<div class="instruction">Soruları yanıtlayın ve ünitenin sonunda dijital sertifikanızı alın!</div>
<div class="item-card" id="q1">
<p><strong>Soru 1:</strong> Aşağıdaki şifrelerden hangisi en GÜÇLÜ şifredir?</p>
<div class="btn-group">
<button class="btn btn-outline" onclick="checkQuiz('q1', false, '12345678')">12345678</button>
<button class="btn btn-outline" onclick="checkQuiz('q1', false, 'ahmet2012')">ahmet2012</button>
<button class="btn btn-outline" onclick="checkQuiz('q1', true, 'Bilgi@2026')">Bilgi@2026</button>
</div>
<div class="feedback"></div>
</div>
<div class="item-card" id="q2">
<p><strong>Soru 2:</strong> İnternette sizi rahatsız eden veya tanımadığınız kişilerden gelen şüpheli bir mesajla karşılaştığınızda ilk olarak ne yapmalısınız?</p>
<div class="btn-group">
<button class="btn btn-outline" onclick="checkQuiz('q2', false, 'A')">Ona kaba sözler yazmalıyım.</button>
<button class="btn btn-outline" onclick="checkQuiz('q2', true, 'B')">Durumu hemen aileme veya öğretmenime bildirmeliyim.</button>
<button class="btn btn-outline" onclick="checkQuiz('q2', false, 'C')">Ev adresimi ve telefonumu göndermeliyim.</button>
</div>
<div class="feedback"></div>
</div>
<button class="btn btn-primary" style="width: 100%; padding: 15px; font-size: 1.1rem; margin-top: 15px;" onclick="generateCertificate()">Etkinliği Tamamla ve Sertifikayı Gör 🎓</button>
<div id="certificate" class="certificate">
<h3>🎓 TEBRİKLER! 🎓</h3>
<p>5. Sınıf Bilişim Etiği ve Güvenlik Ünitesini Başarıyla Tamamladınız!</p>
<div class="student-name" id="certName">Öğrenci Adı</div>
<p>Başarı Puanınız: <strong id="certScore" style="color: var(--secondary); font-size: 1.3rem;">0</strong> / 100</p>
<p style="margin-top: 15px; font-size: 0.85rem; color: #777;">Ders Öğretmeni: İsa Gürbüz - Bilişim Teknolojileri ve Yazılım</p>
</div>
<div class="nav-controls">
<button class="btn btn-secondary" onclick="switchTab(4)">⬅️ Önceki Menü: Şifre Güvenliği</button>
<div></div>
</div>
</div>
</div>
<script>
let totalScore = 0;
let completedItems = {};
function switchTab(tabIndex) {
document.querySelectorAll('.tab-content').forEach(el => el.classList.remove('active'));
document.querySelectorAll('.tab-btn').forEach(el => el.classList.remove('active'));
document.getElementById('tab' + tabIndex).classList.add('active');
document.querySelectorAll('.tab-btn')[tabIndex - 1].classList.add('active');
window.scrollTo({ top: 0, behavior: 'smooth' });
}
function addScore(id, points) {
if (!completedItems[id]) {
completedItems[id] = true;
totalScore += points;
document.getElementById('score').innerText = totalScore + " / 100";
}
}
function checkEtik(id, choice, points) {
let card = document.getElementById(id);
let fb = card.querySelector('.feedback');
if (choice === 'etik' && (id === 'e1')) {
fb.className = 'feedback correct';
fb.innerText = '✅ Doğru! Bu davranış etik kurallara uygundur.';
addScore(id, points);
} else if (choice === 'etik-disi' && (id === 'e2' || id === 'e3' || id === 'e4')) {
fb.className = 'feedback correct';
fb.innerText = '✅ Doğru! Bu davranış etik dışı (hatalı) bir davranıştır.';
addScore(id, points);
} else {
fb.className = 'feedback wrong';
fb.innerText = '❌ Yanlış cevap, tekrar düşününüz.';
}
}
function checkMatch(id, correctVal, points) {
let val = document.getElementById('sel_' + id).value;
let card = document.getElementById(id);
let fb = card.querySelector('.feedback');
if (val === correctVal) {
fb.className = 'feedback correct';
fb.innerText = '✅ TEBRİKLER! Doğru e-Hizmet eşleştirmesi.';
addScore(id, points);
} else if (val !== "") {
fb.className = 'feedback wrong';
fb.innerText = '❌ Yanlış eşleştirme, tekrar deneyin.';
}
}
function checkOyun(id, choice, points) {
let card = document.getElementById(id);
let fb = card.querySelector('.feedback');
if ((id === 'g1' && choice === 'olumlu') || (id !== 'g1' && choice === 'olumsuz')) {
fb.className = 'feedback correct';
fb.innerText = '✅ Doğru tespit!';
addScore(id, points);
} else {
fb.className = 'feedback wrong';
fb.innerText = '❌ Yanlış, tekrar deneyiniz.';
}
}
function checkQuiz(id, isCorrect, answer) {
let card = document.getElementById(id);
let fb = card.querySelector('.feedback');
if (isCorrect) {
fb.className = 'feedback correct';
fb.innerText = '✅ Harika! Doğru cevap.';
addScore(id, 10);
} else {
fb.className = 'feedback wrong';
fb.innerText = '❌ Yanlış cevap, tekrar inceleyin.';
}
}
function testPassword() {
let pass = document.getElementById('passInput').value;
let bar = document.getElementById('strengthBar');
let status = document.getElementById('passStatus');
let rLength = pass.length >= 8;
let rUpper = /[A-Z]/.test(pass);
let rLower = /[a-z]/.test(pass);
let rNumber = /[0-9]/.test(pass);
let rSymbol = /[^A-Za-z0-9]/.test(pass);
updateRule('ruleLength', rLength);
updateRule('ruleUpper', rUpper);
updateRule('ruleLower', rLower);
updateRule('ruleNumber', rNumber);
updateRule('ruleSymbol', rSymbol);
let score = (rLength?1:0) + (rUpper?1:0) + (rLower?1:0) + (rNumber?1:0) + (rSymbol?1:0);
if (pass.length === 0) {
bar.style.width = '0%';
status.innerText = 'Şifre Durumu: Henüz girilmedi';
status.style.color = '#333';
} else if (score <= 2) {
bar.style.width = '30%';
bar.style.backgroundColor = 'var(--danger)';
status.innerText = 'Şifre Durumu: Çok Zayıf / Güvensiz ❌';
status.style.color = 'var(--danger)';
} else if (score <= 4) {
bar.style.width = '65%';
bar.style.backgroundColor = 'var(--warning)';
status.innerText = 'Şifre Durumu: Orta Derece Güvenli ⚠️';
status.style.color = 'var(--warning)';
} else {
bar.style.width = '100%';
bar.style.backgroundColor = 'var(--secondary)';
status.innerText = 'Şifre Durumu: Mükemmel ve Güçlü Şifre! ✅';
status.style.color = 'var(--secondary)';
addScore('pass_lab', 10);
}
}
function updateRule(elementId, isValid) {
let el = document.getElementById(elementId);
if (isValid) {
el.className = 'valid';
el.innerText = '✅ ' + el.innerText.substring(2);
} else {
el.className = '';
el.innerText = '❌ ' + el.innerText.substring(2);
}
}
function generateCertificate() {
let name = document.getElementById('studentNameInput').value.trim();
if (!name) {
alert('Lütfen öncelikle sayfanın üst kısmındaki öğrenci adı alanını doldurunuz!');
return;
}
document.getElementById('certName').innerText = name;
document.getElementById('certScore').innerText = totalScore;
document.getElementById('certificate').style.display = 'block';
document.getElementById('certificate').scrollIntoView({ behavior: 'smooth' });
}
</script>
</body>
</html>
