What are the four rules?
make an Internet Safety page on you Computing Site
use the code generator to make an interactive nfographic or quiz to teach the four rules
use your knowledge of css to style your infographic/quiz - you can also use the css generator
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Internet Safety Adventure</title>
<style>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: 'Comic Sans MS', cursive, sans-serif;
}
body {
background: linear-gradient(135deg, #e0f7fa 0%, #bbdefb 100%);
min-height: 100vh;
display: flex;
justify-content: center;
align-items: center;
padding: 20px;
}
.game-container {
background: white;
border-radius: 20px;
box-shadow: 0 10px 30px rgba(0, 0, 150, 0.1);
padding: 30px;
max-width: 800px;
width: 100%;
text-align: center;
}
h1 {
color: #1565c0;
margin-bottom: 20px;
font-size: 2.5em;
text-shadow: 2px 2px 0 #bbdefb;
}
.subtitle {
color: #5c6bc0;
margin-bottom: 30px;
font-size: 1.2em;
}
.rules-grid {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 20px;
margin-bottom: 30px;
}
.rule-card {
background: #f5f5f5;
border-radius: 15px;
padding: 20px;
cursor: pointer;
transition: all 0.3s ease;
border: 3px solid transparent;
position: relative;
overflow: hidden;
}
.rule-card:hover {
transform: translateY(-5px);
box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
}
.rule-card.active {
border-color: #42a5f5;
background: #e3f2fd;
}
.rule-number {
display: inline-block;
background: #42a5f5;
color: white;
width: 40px;
height: 40px;
line-height: 40px;
border-radius: 50%;
font-weight: bold;
font-size: 1.2em;
margin-bottom: 15px;
}
.rule-title {
color: #1565c0;
margin-bottom: 10px;
font-size: 1.3em;
}
.rule-desc {
color: #333;
line-height: 1.5;
}
.character-area {
background: #e8f5e9;
border-radius: 15px;
padding: 30px;
margin-bottom: 30px;
min-height: 200px;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
}
.character {
font-size: 80px;
margin-bottom: 20px;
transition: transform 0.3s ease;
}
.character-message {
background: white;
border-radius: 15px;
padding: 15px 25px;
font-size: 1.2em;
color: #2e7d32;
max-width: 80%;
box-shadow: 0 3px 10px rgba(0, 0, 0, 0.1);
position: relative;
}
.character-message::before {
content: '';
position: absolute;
top: -10px;
left: 50%;
transform: translateX(-50%);
border-left: 10px solid transparent;
border-right: 10px solid transparent;
border-bottom: 10px solid white;
}
.progress-bar {
height: 10px;
background: #e0e0e0;
border-radius: 5px;
margin-bottom: 20px;
overflow: hidden;
}
.progress-fill {
height: 100%;
background: linear-gradient(90deg, #4caf50, #8bc34a);
width: 0%;
transition: width 0.5s ease;
}
.score {
font-size: 1.5em;
color: #1565c0;
font-weight: bold;
margin-bottom: 20px;
}
.completion-message {
background: #c8e6c9;
border-radius: 15px;
padding: 20px;
margin-top: 20px;
color: #1b5e20;
font-size: 1.3em;
display: none;
}
.completion-message.show {
display: block;
animation: popIn 0.5s ease;
}
@keyframes popIn {
0% { transform: scale(0.8); opacity: 0; }
100% { transform: scale(1); opacity: 1; }
}
@keyframes bounce {
0%, 100% { transform: translateY(0); }
50% { transform: translateY(-20px); }
}
.bounce {
animation: bounce 0.5s ease;
}
@media (max-width: 600px) {
.rules-grid {
grid-template-columns: 1fr;
}
h1 {
font-size: 2em;
}
.character {
font-size: 60px;
}
}
</style>
</head>
<body>
<div class="game-container">
<h1>Internet Safety Adventure</h1>
<p class="subtitle">Learn the 4 golden rules of online safety with our friendly guide!</p>
<div class="progress-bar">
<div class="progress-fill" id="progressFill"></div>
</div>
<div class="score">Rules Learned: <span id="score">0</span>/4</div>
<div class="character-area">
<div class="character" id="character">🤖</div>
<div class="character-message" id="message">
Hi! I'm Cyber Buddy! Click on each rule to learn about internet safety!
</div>
</div>
<div class="rules-grid">
<div class="rule-card" data-rule="1">
<div class="rule-number">1</div>
<h3 class="rule-title">Online Strangers</h3>
<p class="rule-desc">People you meet online are strangers, even if they seem friendly!</p>
</div>
<div class="rule-card" data-rule="2">
<div class="rule-number">2</div>
<h3 class="rule-title">Keep Info Private</h3>
<p class="rule-desc">Never give away personal information like your name, address, or school.</p>
</div>
<div class="rule-card" data-rule="3">
<div class="rule-number">3</div>
<h3 class="rule-title">Tell Someone</h3>
<p class="rule-desc">If something feels not right, tell a parent, teacher, or trusted adult.</p>
</div>
<div class="rule-card" data-rule="4">
<div class="rule-number">4</div>
<h3 class="rule-title">Be Kind Online</h3>
<p class="rule-desc">Always be nice and respectful to others, just like in real life!</p>
</div>
</div>
<div class="completion-message" id="completionMessage">
🎉 Fantastic! You've learned all 4 internet safety rules! You're now a Cyber Safety Expert! 🎉
</div>
</div>
<script>
const rules = {
1: {
character: "👤",
messages: [
"Remember: Online friends might not be who they say they are!",
"Just like in a park, online strangers are still strangers!",
"Always check with an adult before chatting with new online friends!"
]
},
2: {
character: "🔒",
messages: [
"Your personal information is precious - keep it locked up safe!",
"Never share passwords, even with your best friends!",
"Think: Would you give this information to someone on the street?"
]
},
3: {
character: "📢",
messages: [
"Trust your feelings! If something seems wrong, it probably is!",
"Grown-ups are here to help - never be afraid to tell them!",
"Speaking up helps keep everyone safe online!"
]
},
4: {
character: "❤️",
messages: [
"Kind words make the internet a happier place for everyone!",
"Treat others online how you'd want to be treated!",
"Spread positivity - your kindness matters!"
]
}
};
const characterEl = document.getElementById('character');
const messageEl = document.getElementById('message');
const scoreEl = document.getElementById('score');
const progressFill = document.getElementById('progressFill');
const completionMessage = document.getElementById('completionMessage');
const ruleCards = document.querySelectorAll('.rule-card');
let learnedRules = new Set();
let currentRule = null;
let messageIndex = 0;
function updateProgress() {
const score = learnedRules.size;
scoreEl.textContent = score;
progressFill.style.width = `${(score / 4) * 100}%`;
if (score === 4) {
setTimeout(() => {
completionMessage.classList.add('show');
}, 500);
}
}
function showRuleMessage(ruleNumber) {
const rule = rules[ruleNumber];
if (!learnedRules.has(ruleNumber)) {
learnedRules.add(ruleNumber);
updateProgress();
}
characterEl.textContent = rule.character;
characterEl.classList.add('bounce');
messageIndex = (messageIndex + 1) % rule.messages.length;
messageEl.textContent = rule.messages[messageIndex];
setTimeout(() => {
characterEl.classList.remove('bounce');
}, 500);
}
function activateCard(card) {
ruleCards.forEach(c => c.classList.remove('active'));
card.classList.add('active');
}
ruleCards.forEach(card => {
card.addEventListener('click', () => {
const ruleNumber = parseInt(card.dataset.rule);
currentRule = ruleNumber;
activateCard(card);
showRuleMessage(ruleNumber);
});
});
setInterval(() => {
if (currentRule) {
showRuleMessage(currentRule);
}
}, 4000);
updateProgress();
</script>
</body>
</html>