Unleash the hidden powers (features) of SLS's ACP HTML5 Interactives

What it does: Allows students to speak their answers instead of typing. Great for oral assessments, language learning, pronunciation practice, and supporting students with typing difficulties. This works on Chrome-based browsers on laptops and Chromebooks, but not on iPad.

const btn = document.getElementById('speakBtn');
const output = document.getElementById('transcript');

btn.onclick = () => {
  const recognition = new webkitSpeechRecognition();
  recognition.onresult = (e) => {
    output.value = e.results[0][0].transcript;
  };
  recognition.start();
};

What it does: Students can save their work (essays, quiz answers, data) as files on their device and download it as TXT, CSV, or JSON. Perfect for portfolio building, submitting assignments, or keeping records without needing cloud storage.

function downloadAsTxt(content, filename = 'essay.txt') {
  const blob = new Blob([content], { type: 'text/plain' });
  const link = document.createElement('a');
  link.href = URL.createObjectURL(blob);
  link.download = filename;
  link.click();
}

// Usage
downloadAsTxt('Student essay...');

What it does: Provides a digital whiteboard where students can draw diagrams, annotate maps, sketch concepts, or create visual responses. Excellent for math problems, geography tasks, or art activities.

const canvas = document.getElementById('drawCanvas');
const ctx = canvas.getContext('2d');
let drawing = false;

canvas.onmousedown = () => drawing = true;
canvas.onmouseup = () => drawing = false;

canvas.onmousemove = (e) => {
  if (!drawing) return;
  ctx.lineTo(e.offsetX, e.offsetY);
  ctx.stroke();
};

// Clear canvas
function clearCanvas() {
  ctx.clearRect(0, 0, canvas.width, canvas.height);
}

What it does: Turns any part of the webpage into an editable text area. Students can fill in blanks, edit text directly on worksheets, or complete cloze activities without traditional form boxes.

<div contenteditable="true" class="editable-section">
  Type your answer here...
</div>

<script>
function downloadEditedContent() {
  const content = document.querySelector('.editable-section').innerText;
  downloadFile(content, 'worksheet.txt', 'text/plain');
}
</script>

What it does: Students can save the webpage as a PDF document for printing or submission. With Save and Download as PDF, students can download their drawing from the Canvas Drawing Board or edited text as a PDF into their laptop, Chromebook, or iPad. Perfect for assessment records, parent conferences, or student portfolios.

function printToPDF() {
  window.print();
}

// Add print-specific styles in CSS
// @media print {
//   .no-print { display: none; }
//   body { font-size: 12pt; }
// }

What it does: Creates visual celebrations (like confetti animations) when students achieve goals or complete tasks. Boosts motivation and makes learning more engaging and rewarding.

function celebrate() {
  for (let i = 0; i < 50; i++) {
    const confetti = document.createElement('div');
    confetti.className = 'confetti';
    confetti.style.left = Math.random() * 100 + '%';
    confetti.style.backgroundColor = `hsl(${Math.random() * 360}, 100%, 50%)`;
    confetti.style.animationDelay = Math.random() * 3 + 's';
    document.body.appendChild(confetti);
    
    setTimeout(() => confetti.remove(), 3000);
  }
}

What it does: Displays a countdown timer for timed activities. Perfect for quick exercises, speed drills, exam simulations, or time management practice.

let timeLeft = 10; // 10 seconds

const timer = setInterval(() => {
  document.getElementById('timer').innerText = `${timeLeft} seconds`;
  
  if (--timeLeft < 0) {
    clearInterval(timer);
    alert('Time is up!');
  }
}, 1000);

What it does: Lets students switch between light and dark colour themes. Reduces eye strain, accommodates different lighting conditions, and provides accessibility options.

const toggleBtn = document.getElementById('darkModeToggle');

toggleBtn.onclick = () => {
  document.body.classList.toggle('dark');
};

// CSS
// body.dark { background: #222; color: #fff; }

What it does: Enables students to use their device camera to take photos for assignments. Useful for science observations, art projects, evidence collection, or documenting experiments. This can then later be downloaded as a PDF.

const video = document.getElementById('video');
const canvas = document.getElementById('snapshot');

navigator.mediaDevices.getUserMedia({ video: true })
  .then(stream => {
    video.srcObject = stream;
  })
  .catch(err => {
    console.error('Camera access denied:', err);
  });

function capturePhoto() {
  const ctx = canvas.getContext('2d');
  ctx.drawImage(video, 0, 0, canvas.width, canvas.height);
}

What it does: Students can record their screen and audio as a video. Great for explaining their thought process, creating tutorials, recording presentations, or demonstrating digital work. Screen recordings can only be saved in WebM format. This works on laptops and Chromebooks in modern browsers such as Chrome, Edge, and Firefox, but not on iPad.

let recorder;
let chunks = [];

async function startRecording() {
  const stream = await navigator.mediaDevices.getDisplayMedia({ 
    video: true, 
    audio: true 
  });
  recorder = new MediaRecorder(stream);
  
  recorder.ondataavailable = (e) => chunks.push(e.data);
  recorder.onstop = () => {
    const blob = new Blob(chunks, { type: 'video/webm' });
    const url = URL.createObjectURL(blob);
    const a = document.createElement('a');
    a.href = url;
    a.download = 'recording.webm';
    a.click();
    chunks = [];
  };
  
  recorder.start();
}

function stopRecording() {
  recorder.stop();
}

What it does: Allows students to download the recorded screen video by clicking a download button. The download format is WebM only. This works on laptops and Chromebooks in modern browsers such as Chrome, Edge, and Firefox, but not on iPad.

let recordedBlob = null;

function onRecordingReady(chunks) {
  recordedBlob = new Blob(chunks, { type: 'video/webm' });
}

function downloadScreenRecording() {
  if (!recordedBlob) {
    alert('No recording available yet.');
    return;
  }

  const url = URL.createObjectURL(recordedBlob);
  const link = document.createElement('a');
  link.href = url;
  link.download = 'screen-recording.webm';
  link.click();
  URL.revokeObjectURL(url);
}

What it does: Automatically generates bar charts and graphs from data. Helps students visualise statistics, compare results, analyse trends, or present survey findings.

const canvas = document.getElementById('chart');
const ctx = canvas.getContext('2d');
const data = [65, 85, 92, 78];
const labels = ['Test 1', 'Test 2', 'Test 3', 'Test 4'];

data.forEach((value, i) => {
  const x = i * 80 + 30;
  const height = value * 2;
  const y = 250 - height;
  
  ctx.fillStyle = '#4CAF50';
  ctx.fillRect(x, y, 50, height);
  ctx.fillStyle = '#000';
  ctx.fillText(value, x + 15, y - 5);
  ctx.fillText(labels[i], x + 5, 270);
});

What it does: Hides answers or explanations until students click to reveal them. Encourages active thinking before checking answers and supports self-paced learning.

document.querySelectorAll('.reveal-btn').forEach(btn => {
  btn.onclick = () => {
    const answer = btn.nextElementSibling;
    const isHidden = answer.style.display === 'none';
    answer.style.display = isHidden ? 'block' : 'none';
    btn.innerText = isHidden ? 'Hide Answer' : 'Show Answer';
  };
});

What it does: Randomly assigns ten questions from a larger question list each time. Provides varied practice, prevents memorisation of question order, and reduces copying between students.

const questionBank = [
  { q: "What is 2+2?", a: "4" },
  { q: "Capital of France?", a: "Paris" },
  // ... 48 more questions
];

function assignRandomQuestions(questionList, numberToAssign = 10) {
  const shuffled = [...questionList].sort(() => Math.random() - 0.5);
  return shuffled.slice(0, numberToAssign);
}

const assignedQuestions = assignRandomQuestions(questionBank, 10);

What it does: Reads text aloud using the computer’s built-in voice. Supports Chinese by default on most systems. Malay and Tamil are supported only if the relevant language pack and text-to-speech voice are installed in the operating system. Supports struggling readers, language learners, auditory learners, and students with visual impairments or dyslexia.

function speakText(text, rate = 1, pitch = 1) {
  const utterance = new SpeechSynthesisUtterance(text);
  utterance.rate = rate;
  utterance.pitch = pitch;
  speechSynthesis.speak(utterance);
}

// Usage
document.getElementById('readBtn').onclick = () => {
  const text = document.getElementById('content').innerText;
  speakText(text, 1, 1);
};

// Stop speaking
function stopSpeaking() {
  speechSynthesis.cancel();
}