آزمون علوم هفتم - نفوذپذیری خاک
by SuperCoder80468 lines15.7 KB
<!DOCTYPE html>
<html lang="fa" dir="rtl">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>آزمون علوم هفتم - نفوذپذیری خاک</title>
<style>
*{box-sizing:border-box;}
body{
margin:0;
padding:0;
font-family:sans-serif;
direction:rtl;
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 140 140'%3E%3Crect width='140' height='140' fill='%23E1F5FE'/%3E%3Ccircle cx='30' cy='25' r='15' fill='%23B3E5FC'/%3E%3Ccircle cx='50' cy='20' r='18' fill='%23B3E5FC'/%3E%3Ccircle cx='70' cy='25' r='14' fill='%23B3E5FC'/%3E%3Crect x='30' y='25' width='40' height='12' rx='5' fill='%23B3E5FC'/%3E%3Cpath d='M40 45 L42 38 L44 45 Z' fill='%2342A5F5' opacity='0.8'/%3E%3Cpath d='M55 50 L57 43 L59 50 Z' fill='%2342A5F5' opacity='0.7'/%3E%3Cpath d='M70 48 L72 41 L74 48 Z' fill='%2342A5F5' opacity='0.8'/%3E%3Cpath d='M25 55 L27 48 L29 55 Z' fill='%2342A5F5' opacity='0.6'/%3E%3Cpath d='M85 45 L87 38 L89 45 Z' fill='%2342A5F5' opacity='0.7'/%3E%3Cellipse cx='50' cy='120' rx='35' ry='8' fill='%2390CAF9' opacity='0.6'/%3E%3Cellipse cx='100' cy='125' rx='25' ry='6' fill='%2390CAF9' opacity='0.5'/%3E%3Cpath d='M110 70 Q120 55 130 70 Z' fill='%23FF7043'/%3E%3Crect x='118' y='70' width='4' height='18' fill='%23795548'/%3E%3Ccircle cx='120' cy='88' r='2' fill='%23795548'/%3E%3Ccircle cx='20' cy='115' r='4' fill='%238D6E63'/%3E%3Ccircle cx='35' cy='118' r='3' fill='%23795548'/%3E%3Ccircle cx='65' cy='122' r='4' fill='%236D4C41'/%3E%3Ccircle cx='85' cy='118' r='3' fill='%238D6E63'/%3E%3Ccircle cx='110' cy='120' r='4' fill='%23795548'/%3E%3Cpath d='M50 105 L50 92 M50 92 L46 87 M50 92 L54 87' stroke='%2366BB6A' stroke-width='2' fill='none'/%3E%3C/svg%3E");
background-size: 120px;
background-repeat: repeat;
background-attachment: fixed;
}
.wrapper{
min-height:100vh;
display:flex;
justify-content:center;
align-items:center;
padding:60px 20px;
background:rgba(225,245,254,0.5);
}
.container{
width:100%;
max-width:340px;
background:#ffffff;
border-radius:28px;
padding:18px;
box-shadow:0 20px 35px rgba(0,0,0,0.15);
border:2px solid #90caf9;
}
.header{
background:linear-gradient(135deg, #0288d1, #0277bd);
color:#fff;
padding:12px;
border-radius:20px;
text-align:center;
font-weight:bold;
margin-bottom:12px;
font-size:18px;
box-shadow:0 4px 10px rgba(0,0,0,0.1);
}
.designer{
font-size:10px;
margin-top:5px;
color:#b3e5fc;
}
.info{
font-size:13px;
margin:10px 0;
}
.info input{
width:100%;
margin-top:5px;
padding:8px 12px;
border-radius:50px;
border:2px solid #90caf9;
font-size:13px;
font-family:inherit;
transition:0.2s;
}
.info input:focus{
outline:none;
border-color:#42a5f5;
box-shadow:0 0 0 3px #bbdefb;
}
.status{
font-size:13px;
margin-top:10px;
background:#e1f5fe;
padding:8px 14px;
border-radius:50px;
display:flex;
justify-content:space-between;
font-weight:bold;
}
.question-box{
margin-top:16px;
background:linear-gradient(135deg, #fff8e1, #ffecb3);
border-radius:20px;
padding:16px;
font-weight:bold;
min-height:80px;
font-size:15px;
border-right:5px solid #42a5f5;
box-shadow:0 2px 8px rgba(0,0,0,0.05);
}
.optionBtn{
width:100%;
padding:11px;
margin-top:10px;
border-radius:50px;
border:2px solid #90caf9;
background:#ffffff;
font-size:16px;
font-weight:bold;
display:flex;
justify-content:center;
gap:10px;
cursor:pointer;
transition:0.2s;
}
.optionBtn:hover{
background:#e1f5fe;
transform:scale(1.01);
}
.optionSelected{
background:#bbdefb !important;
border-color:#1e88e5;
box-shadow:0 2px 8px rgba(30,136,229,0.3);
}
.checkBtn,.nextBtn{
width:100%;
padding:11px;
margin-top:12px;
border:none;
border-radius:50px;
font-size:15px;
font-weight:bold;
cursor:pointer;
color:#fff;
transition:0.2s;
}
.checkBtn{background:linear-gradient(135deg, #42a5f5, #1e88e5);}
.nextBtn{background:linear-gradient(135deg, #66bb6a, #43a047);}
.checkBtn:hover,.nextBtn:hover{
transform:scale(1.01);
filter:brightness(1.02);
}
.hidden{display:none;}
.feedbackBox{
margin-top:14px;
background:#e8f5e9;
border-radius:18px;
padding:12px;
font-size:13px;
line-height:1.6;
border-right:4px solid #66bb6a;
}
.feedbackCorrect{color:#2e7d32;font-weight:bold;}
.feedbackWrong{color:#c62828;font-weight:bold;}
.note{
margin-top:14px;
text-align:center;
font-size:11px;
color:#0288d1;
font-weight:bold;
}
#restartBtn{
background:linear-gradient(135deg, #7e57c2, #5e35b1);
margin-top:12px;
}
#displayStudentName{
font-weight:bold;
color:#0277bd;
background:#bbdefb;
padding:3px 12px;
border-radius:40px;
font-size:11px;
}
/* دکمه شناور موزیک */
.music-btn {
position: fixed;
bottom: 20px;
left: 20px;
width: 55px;
height: 55px;
border-radius: 50%;
background: linear-gradient(135deg, #0288d1, #0277bd);
border: none;
cursor: pointer;
box-shadow: 0 4px 15px rgba(0,0,0,0.2);
font-size: 28px;
display: flex;
align-items: center;
justify-content: center;
transition: 0.3s;
z-index: 1000;
color: white;
}
.music-btn:hover {
transform: scale(1.08);
box-shadow: 0 6px 20px rgba(0,0,0,0.3);
}
.music-btn.playing {
background: linear-gradient(135deg, #4caf50, #388e3c);
animation: pulse 1.5s infinite;
}
/* دکمه تنظیم صدا */
.volume-btn {
position: fixed;
bottom: 20px;
left: 90px;
width: 45px;
height: 45px;
border-radius: 50%;
background: linear-gradient(135deg, #455a64, #37474f);
border: none;
cursor: pointer;
box-shadow: 0 4px 15px rgba(0,0,0,0.2);
font-size: 20px;
display: flex;
align-items: center;
justify-content: center;
transition: 0.3s;
z-index: 1000;
color: white;
}
.volume-btn:hover {
transform: scale(1.05);
}
@keyframes pulse {
0% { box-shadow: 0 0 0 0 rgba(76,175,80,0.4); }
70% { box-shadow: 0 0 0 10px rgba(76,175,80,0); }
100% { box-shadow: 0 0 0 0 rgba(76,175,80,0); }
}
</style>
</head>
<body>
<div class="wrapper">
<div class="container">
<div class="header">
☁️💧 آزمون علوم هفتم - نفوذپذیری خاک 🌱
<div class="designer">طراح: مهلا احمدی | آزمایشگاه آب و خاک</div>
</div>
<div class="info">
🧑🔬 نام دانشمند آینده:
<input id="studentName" placeholder="مثال: سارا، امیرعلی...">
</div>
<div class="status">
<span id="qNumber">📋 سؤال 1 از 4</span>
<span id="displayStudentName"></span>
<span id="score">⭐ امتیاز: 0</span>
</div>
<div id="question" class="question-box"></div>
<button class="optionBtn" data-val="true" onclick="selectOption(this)">
<span>✅</span> صحیح <span>✅</span>
</button>
<button class="optionBtn" data-val="false" onclick="selectOption(this)">
<span>❌</span> غلط <span>❌</span>
</button>
<button class="checkBtn" onclick="checkAnswer()">🔬 بررسی پاسخ</button>
<button class="nextBtn hidden" onclick="nextQuestion()">💧 سؤال بعدی ➡</button>
<div id="feedback" class="feedbackBox hidden"></div>
<div class="note">
☔ هر قطره باران که بر زمین میبارد، داستان نفوذپذیری را روایت میکند ✨
</div>
</div>
</div>
<!-- دکمه شناور موزیک -->
<button class="music-btn" id="musicBtn" onclick="toggleMusic()">🎵</button>
<!-- دکمه تنظیم صدا -->
<button class="volume-btn" id="volumeBtn" onclick="adjustVolume()">🔊</button>
<audio id="bgMusic" loop preload="auto">
<!-- موزیک ملودیک و آرامبخش پیانو (صدای نرمال) -->
<source src="https://cdn.pixabay.com/download/audio/2022/05/09/audio_5c5e8a2f1b.mp3?filename=relaxing-piano-109115.mp3" type="audio/mpeg">
<!-- لینک پشتیبان ۱ -->
<source src="https://www.soundhelix.com/examples/mp3/SoundHelix-Song-1.mp3" type="audio/mpeg">
<!-- لینک پشتیبان ۲: موسیقی آرام طبیعت -->
<source src="https://cdn.pixabay.com/download/audio/2022/03/10/audio_c8c8a7e3a1.mp3?filename=calm-nature-108100.mp3" type="audio/mpeg">
</audio>
<script>
const questions = [
{q:"خاک رس آب را به خوبی از خود عبور میدهد.", a:false, explain:"خاک رس ذرات ریز و چسبنده دارد و نفوذپذیری بسیار کمی دارد.", positive:"آفرین! دقیقاً میدانی خاک رس چگونه رفتار میکند 👏"},
{q:"شن بیشترین نفوذپذیری را دارد.", a:true, explain:"ذرات شن درشتتر و فاصلهدار هستند، پس آب راحتتر عبور میکند.", positive:"عالی! نفوذپذیری شن را خوب شناختی 🌟"},
{q:"خاک باغچه معمولاً مخلوطی از رس، شن و مواد آلی است.", a:true, explain:"خاک باغچه ترکیبی است و نفوذپذیری متوسطی دارد.", positive:"آفرین! ترکیب خاک باغچه را خوب بلدی 🌱"},
{q:"هرچه ذرات خاک ریزتر باشند، نفوذپذیری بیشتر میشود.", a:false, explain:"هرچه ذرات ریزتر باشند، نفوذپذیری کمتر میشود.", positive:"آفرین! مفهوم نفوذپذیری را خیلی خوب فهمیدی 💡"}
];
let index=0, score=0, selected=null;
let studentName = "";
let volumeLevel = 0.7; // صدای نرمال (70%)
const studentNameInput = document.getElementById("studentName");
const displayNameSpan = document.getElementById("displayStudentName");
const bgMusic = document.getElementById("bgMusic");
const musicBtn = document.getElementById("musicBtn");
const volumeBtn = document.getElementById("volumeBtn");
// تنظیم صدای اولیه (نرمال، نه کم)
bgMusic.volume = volumeLevel;
function toggleMusic() {
if (bgMusic.paused) {
bgMusic.play().catch(e => {
console.log("برای پخش موزیک روی صفحه کلیک کنید");
alert("برای پخش موزیک، لطفاً روی صفحه کلیک کنید سپس دکمه موزیک را بزنید");
});
musicBtn.classList.add("playing");
musicBtn.innerHTML = "🎶";
} else {
bgMusic.pause();
musicBtn.classList.remove("playing");
musicBtn.innerHTML = "🎵";
}
}
function adjustVolume() {
// چرخش بین صداهای مختلف: 0.7 -> 0.5 -> 0.9 -> 0.7
if (volumeLevel === 0.7) {
volumeLevel = 0.5;
volumeBtn.innerHTML = "🔉";
} else if (volumeLevel === 0.5) {
volumeLevel = 0.9;
volumeBtn.innerHTML = "🔊";
} else if (volumeLevel === 0.9) {
volumeLevel = 0.7;
volumeBtn.innerHTML = "🔊";
}
bgMusic.volume = volumeLevel;
}
// تلاش برای پخش خودکار (با یکبار کلیک روی صفحه)
window.addEventListener('click', function initAudio() {
if (bgMusic.paused && musicBtn.classList.contains('playing') === false) {
// فقط اگر کاربر قبلاً دکمه را نزده باشد
}
});
function updateNameDisplay() {
studentName = studentNameInput.value.trim();
if (studentName === "") {
displayNameSpan.innerText = "☁️ دانشمند آینده";
} else {
displayNameSpan.innerText = "🧑🔬 " + studentName;
}
}
function loadQuestion(){
selected=null;
document.getElementById("feedback").classList.add("hidden");
document.querySelectorAll(".optionBtn").forEach(b=>b.classList.remove("optionSelected"));
document.getElementById("question").innerText=questions[index].q;
document.getElementById("qNumber").innerText="📋 سؤال "+(index+1)+" از "+questions.length;
updateNameDisplay();
}
loadQuestion();
function selectOption(btn){
document.querySelectorAll(".optionBtn").forEach(b=>b.classList.remove("optionSelected"));
btn.classList.add("optionSelected");
selected = (btn.getAttribute("data-val")==="true");
}
function checkAnswer(){
if(selected===null){
alert("☔ لطفاً ابتدا «صحیح» یا «غلط» را انتخاب کن!");
return;
}
const q = questions[index];
const fb = document.getElementById("feedback");
fb.classList.remove("hidden");
if(selected===q.a){
score++;
document.getElementById("score").innerText="⭐ امتیاز: "+score;
fb.innerHTML="✅ <span class='feedbackCorrect'>پاسخ شما درست است.</span><br>📚 "+q.positive;
}else{
fb.innerHTML="❌ <span class='feedbackWrong'>پاسخ شما نادرست است.</span><br>پاسخ صحیح: "+(q.a?"صحیح":"غلط")+"<br>📚 "+q.explain;
}
document.querySelector(".checkBtn").classList.add("hidden");
document.querySelector(".nextBtn").classList.remove("hidden");
}
function nextQuestion(){
index++;
if(index>=questions.length){
let finalMessage = `☁️💧 آزمون به پایان رسید. ${studentName ? studentName + " عزیز، " : "دانشمند آینده عزیز، "}امتیاز نهایی: ${score} از ${questions.length}`;
if (score === questions.length) {
finalMessage += "<br>🎉🎊 تبریک! نمره کامل گرفتی! تو یک متخصص آب و خاک هستی 🎊🎉";
} else {
finalMessage += "<br>📖 میتوانی دوباره امتحان کنی و نمره کامل بگیری! 💪☔";
}
document.getElementById("question").innerHTML = finalMessage;
document.querySelectorAll(".optionBtn").forEach(b=>b.classList.add("hidden"));
document.querySelector(".checkBtn").classList.add("hidden");
document.querySelector(".nextBtn").classList.add("hidden");
document.getElementById("feedback").classList.add("hidden");
let restartBtn = document.getElementById("restartBtn");
if (!restartBtn) {
const container = document.querySelector(".container");
const btn = document.createElement("button");
btn.id = "restartBtn";
btn.innerText = "🔄 شروع دوباره آزمون 🔄";
btn.className = "checkBtn";
btn.style.background = "linear-gradient(135deg, #7e57c2, #5e35b1)";
btn.onclick = restartQuiz;
container.appendChild(btn);
} else {
restartBtn.classList.remove("hidden");
}
return;
}
document.querySelector(".checkBtn").classList.remove("hidden");
document.querySelector(".nextBtn").classList.add("hidden");
loadQuestion();
}
function restartQuiz() {
index = 0;
score = 0;
selected = null;
document.querySelectorAll(".optionBtn").forEach(b => b.classList.remove("hidden"));
document.querySelector(".checkBtn").classList.remove("hidden");
document.querySelector(".nextBtn").classList.add("hidden");
let restartBtn = document.getElementById("restartBtn");
if (restartBtn) restartBtn.classList.add("hidden");
document.getElementById("score").innerText = "⭐ امتیاز: 0";
loadQuestion();
}
studentNameInput.addEventListener("input", updateNameDisplay);
</script>
</body>
</html>Game Source: آزمون علوم هفتم - نفوذپذیری خاک
Creator: SuperCoder80
Libraries: none
Complexity: complex (468 lines, 15.7 KB)
The full source code is displayed above on this page.
Remix Instructions
To remix this game, copy the source code above and modify it. Add a ARCADELAB header at the top with "remix_of: -supercoder80" to link back to the original. Then publish at arcadelab.ai/publish.