You've already forked computing-box
Alexander Davis
93b5f11abe
# Wave 1 Beta Release --- ## Key Features and Enhancements ### 1. Core Functionality - Developed and optimized JavaScript functions for binary, hexadecimal, and logic gate simulations, ensuring high performance and compatibility across GCSE and A-Level specifications. - Introduced dynamic behavior to adapt pages (e.g., GCSE vs A-Level) based on URL or heading context. - Streamlined reset, toggle, and update functionalities for user inputs and sliders across various simulation pages. ### 2. Hexadecimal Simulator - Enabled two configurations: - 8-bit binary with 2-digit hexadecimal (GCSE). - 16-bit binary with 4-digit hexadecimal (A-Level). - Ensured user input validation for denary and hexadecimal values with robust error handling and feedback. ### 3. Hex Colors Module - Added dynamic color preview updates for RGB sliders, denary, binary, and hexadecimal values. - Included an "invert color" feature with corresponding visual updates. ### 4. Logic Gates Module - Implemented NOT, AND, and OR gates with toggle buttons and live output updates. - Enhanced reset functionality to initialize states correctly for each gate type. ### 5. Error Handling - Resolved bugs related to undefined slider properties and invalid binary/hexadecimal inputs. - Implemented fallback defaults for invalid or canceled inputs. --- ## Visual Enhancements ### 1. Custom Illustrations - Created custom images for the following sections: - **About CS:Box**: A simplistic and educational-themed design. - **The Evolution from Bit:Box**: A visual transition from Bit:Box to CS:Box. - **Educational Impact**: Vibrant and engaging designs showcasing classroom learning. - Refined visual hierarchy across all pages for better user experience. ### 2. Navigation Revamp - Redesigned Bootstrap-based dropdown menus for better usability and accessibility. - Improved menu hierarchy to align with the UK Computing Curriculum elements. --- ## Documentation ### 1. CS:Box Overview - Added content explaining the project's evolution from Bit:Box and its educational significance. - Highlighted key features and their relevance to the UK Computing Curriculum. ### 2. GitHub Repository - Structured repository with concise descriptions of modules, features, and usage instructions. --- ## Bug Fixes and Optimizations - Addressed issues with sliders not functioning correctly after reset on hexadecimal pages. - Fixed error with NOT gate toggling state incorrectly upon reset. - Streamlined JavaScript logic across all simulations to reduce redundancy and improve maintainability. --- ## Future Scope - Prepare for **Wave 2 Release** with additional simulations (e.g., XOR gates, floating-point representations). - Enhance accessibility features for a more inclusive user experience. - Explore collaborative features for classroom settings. --- *Wave 1 Beta Release is the foundation of CS:Box, setting the stage for engaging, curriculum-aligned computing education tools.*
78 lines
2.6 KiB
JavaScript
78 lines
2.6 KiB
JavaScript
let notValue = true;
|
|
let andValue = false;
|
|
let orValue = false;
|
|
let input1 = false;
|
|
let input2 = false;
|
|
|
|
const pageHeading = document.getElementById("pageHeading")?.textContent || "";
|
|
|
|
// **Toggle any gate input (e.g., input1, input2, or NOT gate)**
|
|
function toggleGate(gateType) {
|
|
const gateKey = gateType === 'NOT' ? 'NotGate' : `Input${gateType}`;
|
|
const gateSwitch = document.getElementById(`swt${gateKey}`);
|
|
const isActive = gateType === '1' ? input1 : gateType === '2' ? input2 : notValue;
|
|
|
|
const newValue = !isActive;
|
|
if (gateType === '1') input1 = newValue;
|
|
if (gateType === '2') input2 = newValue;
|
|
if (gateType === 'NOT') notValue = newValue;
|
|
|
|
gateSwitch?.classList.toggle('btnActive', newValue);
|
|
|
|
updateGates();
|
|
}
|
|
|
|
// **Update AND, OR, and NOT gates based on the current input state**
|
|
function updateGates() {
|
|
if (pageHeading === "AND Gate") updateGate('AndGate', input1 && input2);
|
|
if (pageHeading === "OR Gate") updateGate('OrGate', input1 || input2);
|
|
if (pageHeading === "NOT Gate") updateGate('NotGate', !notValue);
|
|
}
|
|
|
|
// **Toggle the output bulb for a gate (e.g., AndGate, OrGate, or NotGate)**
|
|
function updateGate(gateName, isActive) {
|
|
const bulb = document.getElementById(`blb${gateName}`);
|
|
if (!bulb) return;
|
|
|
|
bulb.classList.toggle('poweredOn', isActive);
|
|
bulb.classList.toggle('poweredOff', !isActive);
|
|
|
|
if (gateName === 'AndGate') andValue = isActive;
|
|
if (gateName === 'OrGate') orValue = isActive;
|
|
}
|
|
|
|
// **Reset the gate to its default state**
|
|
function resetGate() {
|
|
if (pageHeading === "AND Gate" || pageHeading === "OR Gate") {
|
|
resetInput('1');
|
|
resetInput('2');
|
|
} else if (pageHeading === "NOT Gate") {
|
|
resetNotGate();
|
|
}
|
|
updateGates();
|
|
}
|
|
|
|
// **Reset the inputs for Input1 or Input2**
|
|
function resetInput(inputNumber) {
|
|
if (inputNumber === '1') input1 = false;
|
|
if (inputNumber === '2') input2 = false;
|
|
|
|
const switchElement = document.getElementById(`swtInput${inputNumber}`);
|
|
if (switchElement) switchElement.classList.remove('btnActive');
|
|
}
|
|
|
|
// **Reset the NOT gate to its default state**
|
|
function resetNotGate() {
|
|
notValue = false; // NOT Gate logic is inverted, so this is "off" input
|
|
const bulb = document.getElementById("blbNotGate");
|
|
const switchElement = document.getElementById("swtNotGate");
|
|
|
|
if (bulb) {
|
|
bulb.classList.add('poweredOn'); // Light should be on
|
|
bulb.classList.remove('poweredOff');
|
|
}
|
|
if (switchElement) {
|
|
switchElement.classList.remove('btnActive'); // Button should be off (inactive)
|
|
}
|
|
}
|