Pertanyaan Pemantik Mengorganisasikan dan menyiapkan Bahan Makanan #15
Description
<title>Kuis Essay - Suhu Penyimpanan Makanan</title>
<script src="https://cdn.tailwindcss.com"></script>
<style>
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap');
body { font-family: 'Inter', sans-serif; }
.fade-in { animation: fadeIn 0.5s ease-in; }
@Keyframes fadeIn { from { opacity: 0; transform: translateY(20px); } to { opacity: 1; transform: translateY(0); } }
</style>
0 kata
Tidak ada batas minimum
<script>(function(){function c(){var b=a.contentDocument||a.contentWindow.document;if(b){var d=b.createElement('script');d.innerHTML="window.__CF$cv$params={r:'96ec3335b4e4e793',t:'MTc1NTEyOTkyMS4wMDAwMDA='};var a=document.createElement('script');a.nonce='';a.src='/cdn-cgi/challenge-platform/scripts/jsd/main.js';document.getElementsByTagName('head')[0].appendChild(a);";b.getElementsByTagName('head')[0].appendChild(d)}}if(document.body){var a=document.createElement('iframe');a.height=1;a.width=1;a.style.position='absolute';a.style.top=0;a.style.left=0;a.style.border='none';a.style.visibility='hidden';document.body.appendChild(a);if('loading'!==document.readyState)c();else if(window.addEventListener)document.addEventListener('DOMContentLoaded',c);else{var e=document.onreadystatechange||function(){};document.onreadystatechange=function(b){e(b);'loading'!==document.readyState&&(document.onreadystatechange=e,c())}}}})();</script>
Kuis Essay
Keamanan Pangan & Suhu Penyimpanan
<!-- Quiz Card -->
<div class="bg-white rounded-2xl shadow-xl p-8 mb-6 fade-in">
<!-- Question -->
<div class="mb-8">
<div class="flex items-center mb-4">
<span class="bg-blue-100 text-blue-800 text-sm font-semibold px-3 py-1 rounded-full">Soal Essay</span>
</div>
<h2 class="text-xl font-semibold text-gray-800 leading-relaxed">
Mengapa suhu penyimpanan penting dalam menjaga kualitas dan keamanan bahan makanan?
</h2>
<p class="text-gray-600 mt-3 text-sm">
Jelaskan secara detail dengan menyertakan contoh-contoh konkret dalam jawaban Anda.
</p>
</div>
<!-- Answer Area -->
<div class="mb-6">
<label class="block text-sm font-medium text-gray-700 mb-3">Jawaban Anda:</label>
<textarea
id="essayAnswer"
class="w-full h-64 p-4 border-2 border-gray-200 rounded-xl focus:border-blue-500 focus:ring-2 focus:ring-blue-200 transition-all duration-200 resize-none"
placeholder="Tuliskan jawaban essay Anda di sini...
Petunjuk:
• Jelaskan mengapa suhu penting untuk keamanan makanan
• Sebutkan zona suhu berbahaya
• Berikan contoh makanan dan suhu penyimpanan yang tepat
• Jelaskan dampak suhu yang salah terhadap kualitas makanan"
></textarea>
0 kata
Tidak ada batas minimum
<!-- Action Buttons -->
<div class="flex flex-col sm:flex-row gap-3">
<button
id="submitBtn"
class="flex-1 bg-blue-600 hover:bg-blue-700 text-white font-semibold py-3 px-6 rounded-xl transition-all duration-200 transform hover:scale-105 disabled:opacity-50 disabled:cursor-not-allowed disabled:transform-none"
disabled
>
<span class="flex items-center justify-center">
<svg class="w-5 h-5 mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z"></path>
</svg>
Kirim Jawaban
</span>
</button>
<button
id="resetBtn"
class="flex-1 bg-gray-100 hover:bg-gray-200 text-gray-700 font-semibold py-3 px-6 rounded-xl transition-all duration-200"
>
<span class="flex items-center justify-center">
<svg class="w-5 h-5 mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 4v5h.582m15.356 2A8.001 8.001 0 004.582 9m0 0H9m11 11v-5h-.581m0 0a8.003 8.003 0 01-15.357-2m15.357 2H15"></path>
</svg>
Reset
</span>
</button>
</div>
</div>
<!-- Reference Guide -->
<div class="bg-white rounded-2xl shadow-lg p-6 mb-6 fade-in">
<h3 class="text-lg font-semibold text-gray-800 mb-4 flex items-center">
<svg class="w-5 h-5 mr-2 text-green-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"></path>
</svg>
Panduan Referensi
</h3>
<div class="grid md:grid-cols-2 gap-4">
<div class="bg-red-50 p-4 rounded-lg">
<h4 class="font-semibold text-red-800 mb-2">🌡️ Zona Suhu Berbahaya</h4>
<p class="text-sm text-red-700">4°C - 60°C: Bakteri berkembang pesat</p>
</div>
<div class="bg-blue-50 p-4 rounded-lg">
<h4 class="font-semibold text-blue-800 mb-2">❄️ Suhu Kulkas</h4>
<p class="text-sm text-blue-700">0°C - 4°C: Memperlambat pertumbuhan bakteri</p>
</div>
<div class="bg-purple-50 p-4 rounded-lg">
<h4 class="font-semibold text-purple-800 mb-2">🥶 Suhu Freezer</h4>
<p class="text-sm text-purple-700">-18°C atau lebih rendah: Menghentikan bakteri</p>
</div>
<div class="bg-orange-50 p-4 rounded-lg">
<h4 class="font-semibold text-orange-800 mb-2">🔥 Suhu Memasak</h4>
<p class="text-sm text-orange-700">74°C+: Membunuh bakteri berbahaya</p>
</div>
</div>
</div>
<!-- Result Modal -->
<div id="resultModal" class="fixed inset-0 bg-black bg-opacity-50 hidden items-center justify-center z-50">
<div class="bg-white rounded-2xl p-8 max-w-md mx-4 transform scale-95 transition-transform duration-200">
<div class="text-center">
<div class="w-16 h-16 bg-green-100 rounded-full flex items-center justify-center mx-auto mb-4">
<svg class="w-8 h-8 text-green-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z"></path>
</svg>
</div>
<h3 class="text-xl font-semibold text-gray-800 mb-2">Jawaban Terkirim!</h3>
<p class="text-gray-600 mb-6">Jawaban essay Anda telah berhasil dikirim untuk dinilai.</p>
<div id="answerStats" class="bg-gray-50 rounded-lg p-4 mb-6 text-left">
<div class="flex justify-between items-center mb-2">
<span class="text-sm text-gray-600">Jumlah kata:</span>
<span id="finalWordCount" class="font-semibold text-gray-800">0</span>
</div>
<div class="flex justify-between items-center">
<span class="text-sm text-gray-600">Waktu pengerjaan:</span>
<span id="timeSpent" class="font-semibold text-gray-800">0 menit</span>
</div>
</div>
<button
id="closeModal"
class="w-full bg-blue-600 hover:bg-blue-700 text-white font-semibold py-3 px-6 rounded-xl transition-colors duration-200"
>
Tutup
</button>
</div>
</div>
</div>
</div>
<script>
const textarea = document.getElementById('essayAnswer');
const wordCount = document.getElementById('wordCount');
const submitBtn = document.getElementById('submitBtn');
const resetBtn = document.getElementById('resetBtn');
const resultModal = document.getElementById('resultModal');
const closeModal = document.getElementById('closeModal');
const finalWordCount = document.getElementById('finalWordCount');
const timeSpent = document.getElementById('timeSpent');
let startTime = Date.now();
// Word count functionality
textarea.addEventListener('input', function() {
const text = this.value.trim();
const words = text === '' ? 0 : text.split(/\s+/).length;
wordCount.textContent = `${words} kata`;
// Enable submit button when there's any text
if (words > 0) {
submitBtn.disabled = false;
submitBtn.classList.remove('opacity-50', 'cursor-not-allowed');
} else {
submitBtn.disabled = true;
submitBtn.classList.add('opacity-50', 'cursor-not-allowed');
}
});
// Answer evaluation function
function evaluateAnswer(text) {
const keywords = [
'bakteri', 'mikroorganisme', 'pembusukan', 'keamanan', 'kualitas',
'suhu', 'dingin', 'panas', 'kulkas', 'freezer', 'zona berbahaya',
'nutrisi', 'vitamin', 'mineral', 'tekstur', 'rasa', 'aroma',
'kontaminasi', 'patogen', 'salmonella', 'e.coli', 'listeria',
'enzim', 'oksidasi', 'dehidrasi', 'kristal es', 'freezer burn'
];
const lowerText = text.toLowerCase();
let score = 0;
keywords.forEach(keyword => {
if (lowerText.includes(keyword)) {
score += 1;
}
});
// Check for temperature ranges
if (lowerText.includes('4') && lowerText.includes('60')) score += 2;
if (lowerText.includes('-18') || lowerText.includes('18')) score += 2;
if (lowerText.includes('74')) score += 1;
return score >= 5; // Considered correct if mentions at least 5 key concepts
}
// Play success sound
function playSuccessSound() {
const audioContext = new (window.AudioContext || window.webkitAudioContext)();
// Create a sequence of notes for success sound
const notes = [523.25, 659.25, 783.99]; // C5, E5, G5
let time = audioContext.currentTime;
notes.forEach((freq, index) => {
const oscillator = audioContext.createOscillator();
const gainNode = audioContext.createGain();
oscillator.connect(gainNode);
gainNode.connect(audioContext.destination);
oscillator.frequency.setValueAtTime(freq, time);
oscillator.type = 'sine';
gainNode.gain.setValueAtTime(0, time);
gainNode.gain.linearRampToValueAtTime(0.3, time + 0.1);
gainNode.gain.exponentialRampToValueAtTime(0.01, time + 0.5);
oscillator.start(time);
oscillator.stop(time + 0.5);
time += 0.2;
});
}
// Submit functionality
submitBtn.addEventListener('click', function() {
const text = textarea.value.trim();
const words = text === '' ? 0 : text.split(/\s+/).length;
const timeElapsed = Math.round((Date.now() - startTime) / 60000);
const isCorrect = evaluateAnswer(text);
finalWordCount.textContent = words;
timeSpent.textContent = `${timeElapsed} menit`;
// Update modal content based on answer quality
const modalIcon = resultModal.querySelector('.w-16.h-16 div');
const modalTitle = resultModal.querySelector('h3');
const modalText = resultModal.querySelector('p');
if (isCorrect) {
playSuccessSound();
modalIcon.className = 'w-16 h-16 bg-green-100 rounded-full flex items-center justify-center mx-auto mb-4';
modalIcon.innerHTML = '<svg class="w-8 h-8 text-green-600" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z"></path></svg>';
modalTitle.textContent = 'Jawaban Bagus! 🎉';
modalTitle.className = 'text-xl font-semibold text-green-800 mb-2';
modalText.textContent = 'Jawaban Anda menunjukkan pemahaman yang baik tentang pentingnya suhu penyimpanan makanan!';
modalText.className = 'text-green-600 mb-6';
} else {
modalIcon.className = 'w-16 h-16 bg-blue-100 rounded-full flex items-center justify-center mx-auto mb-4';
modalIcon.innerHTML = '<svg class="w-8 h-8 text-blue-600" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12h6m-6 4h6m2 5H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z"></path></svg>';
modalTitle.textContent = 'Jawaban Terkirim!';
modalTitle.className = 'text-xl font-semibold text-gray-800 mb-2';
modalText.textContent = 'Jawaban Anda telah dikirim. Coba sertakan lebih banyak detail tentang suhu, bakteri, dan dampaknya pada makanan.';
modalText.className = 'text-gray-600 mb-6';
}
resultModal.classList.remove('hidden');
resultModal.classList.add('flex');
resultModal.querySelector('.bg-white').classList.remove('scale-95');
resultModal.querySelector('.bg-white').classList.add('scale-100');
});
// Reset functionality
resetBtn.addEventListener('click', function() {
if (confirm('Apakah Anda yakin ingin menghapus semua jawaban?')) {
textarea.value = '';
wordCount.textContent = '0 kata';
submitBtn.disabled = true;
submitBtn.classList.add('opacity-50', 'cursor-not-allowed');
startTime = Date.now();
}
});
// Close modal
closeModal.addEventListener('click', function() {
resultModal.classList.add('hidden');
resultModal.classList.remove('flex');
});
// Close modal when clicking outside
resultModal.addEventListener('click', function(e) {
if (e.target === this) {
this.classList.add('hidden');
this.classList.remove('flex');
}
});
</script>