You've already forked computing-box
Wave 1 Beta Release
# 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.*
This commit is contained in:
@@ -1,100 +1,77 @@
|
||||
notValue = true
|
||||
andValue = false
|
||||
input1 = false
|
||||
input2 = false
|
||||
orValue = false
|
||||
function notGateToggle(){
|
||||
if (notValue){
|
||||
document.getElementById("blbNotGate").classList.remove('poweredOn');
|
||||
document.getElementById("blbNotGate").classList.add('poweredOff');
|
||||
document.getElementById("swtNotGate").classList.add('btnActive');
|
||||
notValue = false;
|
||||
}else{
|
||||
document.getElementById("blbNotGate").classList.remove('poweredOff');
|
||||
document.getElementById("blbNotGate").classList.add('poweredOn');
|
||||
document.getElementById("swtNotGate").classList.remove('btnActive');
|
||||
notValue = true;
|
||||
}
|
||||
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();
|
||||
}
|
||||
|
||||
function input1Toggle(){
|
||||
if (input1){
|
||||
input1 = false;
|
||||
document.getElementById("swtInput1").classList.remove('btnActive');
|
||||
}else{
|
||||
input1 = true;
|
||||
document.getElementById("swtInput1").classList.add('btnActive');
|
||||
}
|
||||
let pageHeading = document.getElementById("pageHeading").textContent;
|
||||
if(pageHeading=="AND Gate"){
|
||||
andGateUpdate()
|
||||
}else if(pageHeading=="OR Gate"){
|
||||
orGateUpdate()
|
||||
}
|
||||
// **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);
|
||||
}
|
||||
|
||||
function input2Toggle(){
|
||||
if (input2){
|
||||
input2 = false;
|
||||
document.getElementById("swtInput2").classList.remove('btnActive');
|
||||
}else{
|
||||
input2 = true;
|
||||
document.getElementById("swtInput2").classList.add('btnActive');
|
||||
}
|
||||
let pageHeading = document.getElementById("pageHeading").textContent;
|
||||
if(pageHeading=="AND Gate"){
|
||||
andGateUpdate()
|
||||
}else if(pageHeading=="OR Gate"){
|
||||
orGateUpdate()
|
||||
}
|
||||
// **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;
|
||||
}
|
||||
|
||||
function andGateUpdate(){
|
||||
if (input1 && input2){
|
||||
document.getElementById("blbAndGate").classList.remove('poweredOff');
|
||||
document.getElementById("blbAndGate").classList.add('poweredOn');
|
||||
andValue = true;
|
||||
}else{
|
||||
if (andValue){
|
||||
document.getElementById("blbAndGate").classList.remove('poweredOn');
|
||||
document.getElementById("blbAndGate").classList.add('poweredOff');
|
||||
andValue = false;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
function orGateUpdate(){
|
||||
if (input1 || input2){
|
||||
if (!orValue){
|
||||
document.getElementById("blbOrGate").classList.remove('poweredOff');
|
||||
document.getElementById("blbOrGate").classList.add('poweredOn');
|
||||
orValue = true;
|
||||
}
|
||||
}else{
|
||||
if (orValue){
|
||||
document.getElementById("blbOrGate").classList.remove('poweredOn');
|
||||
document.getElementById("blbOrGate").classList.add('poweredOff');
|
||||
orValue = false;
|
||||
}
|
||||
// **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();
|
||||
}
|
||||
|
||||
function resetGate(){
|
||||
let pageHeading = document.getElementById("pageHeading").textContent;
|
||||
if(pageHeading=="AND Gate" || pageHeading=="OR Gate"){
|
||||
input1 = false;
|
||||
document.getElementById("swtInput1").classList.remove('btnActive');
|
||||
input2 = false;
|
||||
document.getElementById("swtInput2").classList.remove('btnActive');
|
||||
if(pageHeading=="AND Gate"){
|
||||
andGateUpdate()
|
||||
}else if(pageHeading=="OR Gate"){
|
||||
orGateUpdate()
|
||||
};
|
||||
}else if(pageHeading=="NOT Gate"){
|
||||
document.getElementById("blbNotGate").classList.add('poweredOn');
|
||||
document.getElementById("blbNotGate").classList.remove('poweredOff');
|
||||
document.getElementById("swtNotGate").classList.remove('btnActive');
|
||||
notValue = false;
|
||||
};
|
||||
}
|
||||
// **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)
|
||||
}
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user