(function() { var canvas = document.getElementById(‘electroCanvas’); var ctx = canvas.getContext(‘2d’); var sampleSelect = document.getElementById(‘sampleSelect’); var voltageSlider = document.getElementById(‘voltageSlider’); var voltageValue = document.getElementById(‘voltageValue’); var speedSlider = document.getElementById(‘speedSlider’); var resultBox = document.getElementById(‘electroResult’); var resetBtn = document.getElementById(‘resetElectroBtn’); var pauseBtn = document.getElementById(‘pauseElectroBtn’); var playBtn = document.getElementById(‘playElectroBtn’);var W = 780, H = 360; var TOP = 42, BOTTOM = 310; var LEFT = 48, RIGHT = 732; var CX = LEFT + 18; var AX = RIGHT – 18;var molecules = []; var voltage = 90; var speedMul = 1.0; var running = true; var last = performance.now(); var simTime = 0;function createMolecules(type) { molecules = []; var N = 42; var charges = []; var i, j, temp;if (type === ‘dna’) { for (i = 0; i < Math.floor(N * 0.85); i++) charges.push(-1); while (charges.length < N) charges.push(0); } else if (type === 'proteins') { for (i = 0; i < Math.floor(N * 0.35); i++) charges.push(-1); for (i = 0; i < Math.floor(N * 0.35); i++) charges.push(1); while (charges.length < N) charges.push(0); } else if (type === 'dyes') { for (i = 0; i < Math.floor(N * 0.45); i++) charges.push(-1); for (i = 0; i < Math.floor(N * 0.35); i++) charges.push(1); while (charges.length < N) charges.push(0); } else { for (i = 0; i < Math.floor(N * 0.4); i++) charges.push(-1); for (i = 0; i < Math.floor(N * 0.4); i++) charges.push(1); while (charges.length 0; i–) { j = Math.floor(Math.random() * (i + 1)); temp = charges[i]; charges[i] = charges[j]; charges[j] = temp; }for (i = 0; i < N; i++) { var size = 3.0 + Math.random() * 7.2; var mobility = 1.2 / (size * 0.28 + 0.65); molecules.push({ x: LEFT + 42 + Math.random() * (RIGHT – LEFT – 84), y: TOP + 18 + Math.random() * (BOTTOM – TOP – 36), charge: charges[i], size: size, mobility: mobility }); } simTime = 0; updateResult(); }function update(dt) { if (!running) return; var E = voltage / 100; var thermal = 0.08; var m, dir, v; for (var k = 0; k < molecules.length; k++) { m = molecules[k]; dir = 0; if (m.charge === -1) dir = 1; else if (m.charge === 1) dir = -1; v = dir * m.mobility * E * 52 * speedMul * dt; m.x += v + (Math.random() – 0.5) * thermal; m.y += (Math.random() – 0.5) * thermal * 0.48; if (m.x RIGHT – 11) m.x = RIGHT – 11; if (m.y BOTTOM – 11) m.y = BOTTOM – 11; } simTime += dt; updateResult(); }function updateResult() { var neg = 0, pos = 0, neu = 0; for (var k = 0; k < molecules.length; k++) { if (molecules[k].charge === -1) neg++; else if (molecules[k].charge === 1) pos++; else neu++; } resultBox.innerHTML = 'Time: ' + simTime.toFixed(1) + ' s  |  − ' + neg + '   + ' + pos + '   ∘ ' + neu + '  |  Field: ' + voltage + ' V'; }function draw() { ctx.clearRect(0, 0, W, H); ctx.fillStyle = '#0c1a28'; ctx.fillRect(0, 0, W, H);ctx.fillStyle = 'rgba(20, 50, 80, 0.35)'; ctx.beginPath(); if (ctx.roundRect) { ctx.roundRect(LEFT, TOP, RIGHT – LEFT, BOTTOM – TOP, 10); } else { ctx.rect(LEFT, TOP, RIGHT – LEFT, BOTTOM – TOP); } ctx.fill();ctx.strokeStyle = 'rgba(90, 160, 220, 0.07)'; ctx.lineWidth = 1; for (var y = TOP + 22; y ‘, LEFT + 60, BOTTOM – 8); ctx.fillText(‘<-', RIGHT – 60, BOTTOM – 8);for (var k = 0; k < molecules.length; k++) { var m = molecules[k]; var r = m.size * 0.5 + 2.0; var col, mark; if (m.charge === -1) { col = '#ff6b6b'; mark = '-'; } else if (m.charge === 1) { col = '#4d8eff'; mark = '+'; } else { col = '#a8d06a'; mark = 'o'; }ctx.shadowColor = col + '70'; ctx.shadowBlur = 13; ctx.beginPath(); ctx.arc(m.x, m.y, r, 0, Math.PI * 2); ctx.fillStyle = col; ctx.fill();ctx.shadowBlur = 0; ctx.beginPath(); ctx.arc(m.x – r * 0.25, m.y – r * 0.3, r * 0.28, 0, Math.PI * 2); ctx.fillStyle = 'rgba(255,255,255,0.2)'; ctx.fill();ctx.fillStyle = 'rgba(255,255,255,0.78)'; var fs = Math.max(8, r * 0.7); ctx.font = 'bold ' + fs + 'px sans-serif'; ctx.textAlign = 'center'; ctx.textBaseline = 'middle'; ctx.fillText(mark, m.x, m.y + 0.5); } }function loop(now) { var dt = Math.min((now – last) / 1000, 0.05); last = now; update(dt); draw(); requestAnimationFrame(loop); }voltageSlider.addEventListener('input', function() { voltage = +voltageSlider.value; voltageValue.textContent = voltage + ' V'; }); speedSlider.addEventListener('input', function() { speedMul = +speedSlider.value; }); sampleSelect.addEventListener('change', function() { createMolecules(sampleSelect.value); }); resetBtn.addEventListener('click', function() { createMolecules(sampleSelect.value); }); pauseBtn.addEventListener('click', function() { running = false; }); playBtn.addEventListener('click', function() { running = true; last = performance.now(); }); canvas.addEventListener('dblclick', function() { createMolecules(sampleSelect.value); });var drag = false; canvas.addEventListener('mousedown', function() { drag = true; }); window.addEventListener('mouseup', function() { drag = false; }); canvas.addEventListener('mousemove', function(e) { if (!drag) return; var rect = canvas.getBoundingClientRect(); var sx = canvas.width / rect.width; var mx = (e.clientX – rect.left) * sx; var my = (e.clientY – rect.top) * sx; for (var k = 0; k < molecules.length; k++) { var m = molecules[k]; var dx = m.x – mx; var dy = m.y – my; var d = Math.sqrt(dx * dx + dy * dy); if (d 1) { var f = 2.9 / (d + 1); m.x += (dx / d) * f; m.y += (dy / d) * f; } } } }); canvas.addEventListener(‘touchmove’, function(e) { e.preventDefault(); var t = e.touches[0]; var rect = canvas.getBoundingClientRect(); var sx = canvas.width / rect.width; var mx = (t.clientX – rect.left) * sx; var my = (t.clientY – rect.top) * sx; for (var k = 0; k < molecules.length; k++) { var m = molecules[k]; var dx = m.x – mx; var dy = m.y – my; var d = Math.sqrt(dx * dx + dy * dy); if (d 1) { var f = 2.9 / (d + 1); m.x += (dx / d) * f; m.y += (dy / d) * f; } } } }, { passive: false });createMolecules(‘mixed’); requestAnimationFrame(loop);var submitQuiz = document.getElementById(‘submitQuizBtn’); var quizResultDiv = document.getElementById(‘quizResult’); var questions = document.querySelectorAll(‘.question’);submitQuiz.addEventListener(‘click’, function() { var score = 0; var total = questions.length; for (var idx = 0; idx < questions.length; idx++) { var q = questions[idx]; var correctVal = q.getAttribute('data-correct'); var selected = q.querySelector('input[type=radio]:checked'); var labels = q.querySelectorAll('.options label'); var expDiv = q.querySelector('.explanation'); for (var li = 0; li < labels.length; li++) { labels[li].classList.remove('correct'); labels[li].classList.remove('wrong'); } if (selected) { if (selected.value === correctVal) { score++; selected.parentElement.classList.add('correct'); } else { selected.parentElement.classList.add('wrong'); } } for (var li = 0; li = 80) msg += “Excellent! You’ve mastered electrophoresis.”; else if (percent >= 60) msg += ‘Good! Review the types and applications.’; else msg += ‘Please re-read the theory and try the simulation.’; quizResultDiv.innerHTML = msg; quizResultDiv.style.padding = ’12px’; quizResultDiv.style.background = ‘#e6f0f5′; quizResultDiv.style.borderRadius = ’20px’; submitQuiz.textContent = ‘Retake Quiz’; submitQuiz.onclick = function() { location.reload(); }; }); })();

Download Complete Notes Below