(function () { var canvas = document.getElementById(‘chromaCanvas’); var ctx = canvas.getContext(‘2d’); var solventSelect = document.getElementById(‘solventSelect’); var mixtureSelect = document.getElementById(‘mixtureSelect’); var speedSlider = document.getElementById(‘speedSlider’); var resultBox = document.getElementById(‘chromaResult’); var resetBtn = document.getElementById(‘resetBtn’); var pauseBtn = document.getElementById(‘pauseBtn’); var playBtn = document.getElementById(‘playBtn’);var W = 520, H = 400; var PAPER_L = 90, PAPER_R = 430; var PAPER_TOP = 30, PAPER_BOT = 370; var BASELINE = 330; var SOLVENT_START = 355;var spots = []; var solventY = SOLVENT_START; var running = true; var last = 0; var simTime = 0; var loopDelay = 0;function getRfData() { var solvent = solventSelect.value; var mixture = mixtureSelect.value; var data = [];if (mixture === ‘dyes’) { if (solvent === ‘water’) { data = [ { name: ‘Red’, color: ‘#e74c3c’, rf: 0.72 }, { name: ‘Yellow’, color: ‘#f1c40f’, rf: 0.88 }, { name: ‘Blue’, color: ‘#2980b9’, rf: 0.42 } ]; } else if (solvent === ‘ethanol’) { data = [ { name: ‘Red’, color: ‘#e74c3c’, rf: 0.55 }, { name: ‘Yellow’, color: ‘#f1c40f’, rf: 0.75 }, { name: ‘Blue’, color: ‘#2980b9’, rf: 0.38 } ]; } else { data = [ { name: ‘Red’, color: ‘#e74c3c’, rf: 0.22 }, { name: ‘Yellow’, color: ‘#f1c40f’, rf: 0.30 }, { name: ‘Blue’, color: ‘#2980b9’, rf: 0.12 } ]; } } else { if (solvent === ‘water’) { data = [ { name: ‘Cyan’, color: ‘#1abc9c’, rf: 0.58 }, { name: ‘Magenta’, color: ‘#e84393’, rf: 0.48 }, { name: ‘Yellow’, color: ‘#f1c40f’, rf: 0.78 } ]; } else if (solvent === ‘ethanol’) { data = [ { name: ‘Cyan’, color: ‘#1abc9c’, rf: 0.52 }, { name: ‘Magenta’, color: ‘#e84393’, rf: 0.40 }, { name: ‘Yellow’, color: ‘#f1c40f’, rf: 0.68 } ]; } else { data = [ { name: ‘Cyan’, color: ‘#1abc9c’, rf: 0.16 }, { name: ‘Magenta’, color: ‘#e84393’, rf: 0.12 }, { name: ‘Yellow’, color: ‘#f1c40f’, rf: 0.20 } ]; } } return data; }function initSpots() { var data = getRfData(); spots = []; for (var i = 0; i PAPER_TOP + 12) { solventY -= riseSpeed * dt; if (solventY 1.4) { initSpots(); } return; }var solventTravel = BASELINE – solventY; if (solventTravel < 0) solventTravel = 0;for (var i = 0; i 3.5) { s.trail.push(s.y); if (s.trail.length > 35) s.trail.shift(); } }simTime += dt; updateResult(); }function updateResult() { var solventTravel = BASELINE – solventY; if (solventTravel < 1) solventTravel = 1; var parts = []; for (var i = 0; i < spots.length; i++) { var dist = BASELINE – spots[i].y; var rf = (dist / solventTravel).toFixed(2); parts.push(spots[i].name + ': Rf ' + rf); } resultBox.innerHTML = 'Time ' + simTime.toFixed(1) + ' s  |  ' + parts.join('  ·  '); }function draw() { ctx.clearRect(0, 0, W, H); ctx.fillStyle = '#f5f0e6'; ctx.fillRect(0, 0, W, H);// paper area ctx.fillStyle = '#faf6ee'; ctx.beginPath(); if (ctx.roundRect) ctx.roundRect(PAPER_L, PAPER_TOP, PAPER_R – PAPER_L, PAPER_BOT – PAPER_TOP, 6); else ctx.rect(PAPER_L, PAPER_TOP, PAPER_R – PAPER_L, PAPER_BOT – PAPER_TOP); ctx.fill();// texture ctx.strokeStyle = 'rgba(180,160,120,0.12)'; ctx.lineWidth = 0.6; for (var y = PAPER_TOP + 10; y < PAPER_BOT; y += 12) { ctx.beginPath(); ctx.moveTo(PAPER_L + 5, y); ctx.lineTo(PAPER_R – 5, y); ctx.stroke(); }// baseline ctx.strokeStyle = 'rgba(80,60,40,0.4)'; ctx.lineWidth = 1.2; ctx.setLineDash([4, 3]); ctx.beginPath(); ctx.moveTo(PAPER_L + 6, BASELINE); ctx.lineTo(PAPER_R – 6, BASELINE); ctx.stroke(); ctx.setLineDash([]); ctx.fillStyle = 'rgba(80,60,40,0.55)'; ctx.font = '10px sans-serif'; ctx.textAlign = 'left'; ctx.fillText('baseline', PAPER_L + 8, BASELINE – 5);// solvent reservoir ctx.fillStyle = 'rgba(90,160,240,0.28)'; ctx.fillRect(PAPER_L, SOLVENT_START – 2, PAPER_R – PAPER_L, PAPER_BOT – SOLVENT_START + 2);// solvent front + wet zone if (solventY < SOLVENT_START – 1) { var grad = ctx.createLinearGradient(0, solventY, 0, BASELINE + 5); grad.addColorStop(0, 'rgba(100,175,255,0.2)'); grad.addColorStop(1, 'rgba(100,175,255,0.03)'); ctx.fillStyle = grad; ctx.fillRect(PAPER_L + 2, solventY, PAPER_R – PAPER_L – 4, BASELINE – solventY + 6);ctx.strokeStyle = 'rgba(50,130,220,0.75)'; ctx.lineWidth = 2; ctx.beginPath(); ctx.moveTo(PAPER_L + 3, solventY); ctx.lineTo(PAPER_R – 3, solventY); ctx.stroke();ctx.fillStyle = 'rgba(50,130,220,0.85)'; ctx.font = '10px sans-serif'; ctx.textAlign = 'right'; ctx.fillText('solvent front', PAPER_R – 6, solventY – 5); }// spots var centerX = (PAPER_L + PAPER_R) / 2; var offsets = [-42, 0, 42];for (var i = 0; i < spots.length; i++) { var s = spots[i]; var x = centerX + offsets[i];// trail ctx.globalAlpha = 0.22; for (var t = 0; t < s.trail.length; t++) { ctx.fillStyle = s.color; ctx.beginPath(); ctx.arc(x, s.trail[t], 3.5 + (t / s.trail.length) * 3, 0, Math.PI * 2); ctx.fill(); } ctx.globalAlpha = 1;// main spot ctx.shadowColor = s.color; ctx.shadowBlur = 10; ctx.fillStyle = s.color; ctx.beginPath(); ctx.arc(x, s.y, 9, 0, Math.PI * 2); ctx.fill(); ctx.shadowBlur = 0;ctx.fillStyle = 'rgba(255,255,255,0.35)'; ctx.beginPath(); ctx.arc(x – 2.2, s.y – 2.2, 2.8, 0, Math.PI * 2); ctx.fill();// label ctx.fillStyle = '#334155'; ctx.font = '10px sans-serif'; ctx.textAlign = 'center'; ctx.fillText(s.name, x, s.y – 14); }// faded origin marks ctx.globalAlpha = 0.3; for (var i = 0; i < spots.length; i++) { ctx.fillStyle = spots[i].color; ctx.beginPath(); ctx.arc(centerX + offsets[i], BASELINE, 4.5, 0, Math.PI * 2); ctx.fill(); } ctx.globalAlpha = 1; }function loop(now) { if (!last) last = now; var dt = Math.min((now – last) / 1000, 0.05); last = now; update(dt); draw(); requestAnimationFrame(loop); }function softReset() { initSpots(); updateResult(); }resetBtn.addEventListener('click', function () { softReset(); running = true; }); pauseBtn.addEventListener('click', function () { running = false; }); playBtn.addEventListener('click', function () { running = true; last = performance.now(); }); solventSelect.addEventListener('change', softReset); mixtureSelect.addEventListener('change', softReset);initSpots(); updateResult(); requestAnimationFrame(loop);// Quiz 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 mastery of chromatography!’; else if (percent >= 60) msg += ‘Good! Review the Rf calculation and types.’; else msg += ‘Please review the principles and simulation again.’; 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

download PDF

Leave a Comment Cancel Reply

Your email address will not be published. Required fields are marked *

Type here..

Name*

Email*

Website

Save my name, email, and website in this browser for the next time I comment.

Proudly Powered By

• Facebook
• WhatsApp
• Instagram
• LinkedIn
• YouTube

Advertisement