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,300 +1,113 @@
|
||||
denary = 0
|
||||
redDenary = 0
|
||||
greenDenary = 0
|
||||
blueDenary = 0
|
||||
redBinary = ""
|
||||
greenBinary = ""
|
||||
blueBinary = ""
|
||||
hexadecimal = ""
|
||||
placeR1 = 0
|
||||
placeR16 = 0
|
||||
placeG1 = 0
|
||||
placeG16 = 0
|
||||
placeB1 = 0
|
||||
placeB16 = 0
|
||||
function resetColours(){
|
||||
resetPlaceR16();
|
||||
resetPlaceR1();
|
||||
resetPlaceG16();
|
||||
resetPlaceG1();
|
||||
resetPlaceB16();
|
||||
resetPlaceB1();
|
||||
}
|
||||
function resetPlaceR16(){
|
||||
placeR16 = 0
|
||||
var lightR16 = (100/15 * placeR16) / 100
|
||||
document.getElementById("blbR2").style.opacity = lightR16;
|
||||
updateColours();
|
||||
}
|
||||
function resetPlaceR1(){
|
||||
placeR1 = 0
|
||||
var lightR1 = (100/15 * placeR1) / 100
|
||||
document.getElementById("blbR1").style.opacity = lightR1;
|
||||
updateColours();
|
||||
}
|
||||
function resetPlaceG16(){
|
||||
placeG16 = 0
|
||||
var lightG16 = (100/15 * placeG16) / 100
|
||||
document.getElementById("blbG2").style.opacity = lightG16;
|
||||
updateColours();
|
||||
}
|
||||
function resetPlaceG1(){
|
||||
placeG1 = 0
|
||||
var lightG1 = (100/15 * placeG1) / 100
|
||||
document.getElementById("blbG1").style.opacity = lightG1;
|
||||
updateColours();
|
||||
}
|
||||
function resetPlaceB16(){
|
||||
placeB16 = 0
|
||||
var lightB16 = (100/15 * placeB16) / 100
|
||||
document.getElementById("blbB2").style.opacity = lightB16;
|
||||
updateColours();
|
||||
}
|
||||
function resetPlaceB1(){
|
||||
placeB1 = 0
|
||||
var lightB1 = (100/15 * placeB1) / 100
|
||||
document.getElementById("blbB1").style.opacity = lightB1;
|
||||
updateColours();
|
||||
}
|
||||
function toggleUpR16(){
|
||||
if (placeR16 >= 0){
|
||||
if (placeR16 < 15){
|
||||
placeR16 = placeR16 + 1;
|
||||
var lightR16 = (100/15 * placeR16) / 100
|
||||
document.getElementById("blbR2").style.opacity = lightR16;
|
||||
updateColours();
|
||||
}
|
||||
}
|
||||
}
|
||||
function toggleDownR16(){
|
||||
if (placeR16 > 0){
|
||||
placeR16 = placeR16 - 1;
|
||||
var lightR16 = (100/15 * placeR16) / 100
|
||||
document.getElementById("blbR2").style.opacity = lightR16;
|
||||
updateColours();
|
||||
}
|
||||
}
|
||||
function toggleUpR1(){
|
||||
if (place1 >= 0){
|
||||
if (placeR1 < 15){
|
||||
placeR1 = placeR1 + 1;
|
||||
var lightR1 = (100/15 * placeR1) / 100
|
||||
document.getElementById("blbR1").style.opacity = lightR1;
|
||||
updateColours();
|
||||
}
|
||||
}
|
||||
}
|
||||
function toggleDownR1(){
|
||||
if (placeR1 > 0){
|
||||
placeR1 = placeR1 - 1;
|
||||
var lightR1 = (100/15 * placeR1) / 100
|
||||
document.getElementById("blbR1").style.opacity = lightR1;
|
||||
updateColours();
|
||||
}
|
||||
}
|
||||
function toggleUpG16(){
|
||||
if (placeG16 >= 0){
|
||||
if (placeG16 < 15){
|
||||
placeG16 = placeG16 + 1;
|
||||
var lightG16 = (100/15 * placeG16) / 100
|
||||
document.getElementById("blbG2").style.opacity = lightG16;
|
||||
updateColours();
|
||||
}
|
||||
}
|
||||
}
|
||||
function toggleDownG16(){
|
||||
if (placeG16 > 0){
|
||||
placeG16 = placeG16 - 1;
|
||||
var lightG16 = (100/15 * placeG16) / 100
|
||||
document.getElementById("blbG2").style.opacity = lightG16;
|
||||
updateColours();
|
||||
}
|
||||
}
|
||||
function toggleUpG1(){
|
||||
if (placeG1 >= 0){
|
||||
if (placeG1 < 15){
|
||||
placeG1 = placeG1 + 1;
|
||||
var lightG1 = (100/15 * placeG1) / 100
|
||||
document.getElementById("blbG1").style.opacity = lightG1;
|
||||
updateColours();
|
||||
}
|
||||
}
|
||||
}
|
||||
function toggleDownG1(){
|
||||
if (placeG1 > 0){
|
||||
placeG1 = placeG1 - 1;
|
||||
var lightG1 = (100/15 * placeG1) / 100
|
||||
document.getElementById("blbG1").style.opacity = lightG1;
|
||||
updateColours();
|
||||
}
|
||||
}
|
||||
function toggleUpB16(){
|
||||
if (placeB16 >= 0){
|
||||
if (placeB16 < 15){
|
||||
placeB16 = placeB16 + 1;
|
||||
var lightB16 = (100/15 * placeB16) / 100
|
||||
document.getElementById("blbB2").style.opacity = lightB16;
|
||||
updateColours();
|
||||
}
|
||||
}
|
||||
}
|
||||
function toggleDownB16(){
|
||||
if (placeB16 > 0){
|
||||
placeB16 = placeB16 - 1;
|
||||
var lightB16 = (100/15 * placeB16) / 100
|
||||
document.getElementById("blbB2").style.opacity = lightB16;
|
||||
updateColours();
|
||||
}
|
||||
}
|
||||
function toggleUpB1(){
|
||||
if (placeB1 >= 0){
|
||||
if (placeB1 < 15){
|
||||
placeB1 = placeB1 + 1;
|
||||
var lightB1 = (100/15 * placeB1) / 100
|
||||
document.getElementById("blbB1").style.opacity = lightB1;
|
||||
updateColours();
|
||||
}
|
||||
}
|
||||
}
|
||||
function toggleDownB1(){
|
||||
if (placeB1 > 0){
|
||||
placeB1 = placeB1 - 1;
|
||||
var lightB1 = (100/15 * placeB1) / 100
|
||||
document.getElementById("blbB1").style.opacity = lightB1;
|
||||
updateColours();
|
||||
}
|
||||
}
|
||||
function updateColours(){
|
||||
hexadecimal = "";
|
||||
redDenary = 0
|
||||
greenDenary = 0
|
||||
blueDenary = 0
|
||||
redBinary = ""
|
||||
greenBinary = ""
|
||||
blueBinary = ""
|
||||
denary = ((placeR16*16)+(placeR1))+", "+((placeG16*16)+(placeG1))+", "+((placeB16*16)+(placeB1));
|
||||
hexadecimal = "#" + convertToHex(placeR16) + convertToHex(placeR1) + convertToHex(placeG16) + convertToHex(placeG1) + convertToHex(placeB16) + convertToHex(placeB1);
|
||||
redBinary = convertToBinary(placeR16) + convertToBinary(placeR1);
|
||||
greenBinary = convertToBinary(placeG16) + convertToBinary(placeG1);
|
||||
blueBinary = convertToBinary(placeB16) + convertToBinary(placeB1);
|
||||
document.getElementById("denaryNumber").innerHTML = denary;
|
||||
document.getElementById("hexadecimalNumber").innerHTML = hexadecimal;
|
||||
document.getElementById("colouredHex").style.backgroundColor = hexadecimal;
|
||||
document.getElementById("invertedHex").style.backgroundColor = invertedHex();
|
||||
document.getElementById("redBinaryNumber").innerHTML = redBinary;
|
||||
document.getElementById("blueBinaryNumber").innerHTML = blueBinary;
|
||||
document.getElementById("greenBinaryNumber").innerHTML = greenBinary;
|
||||
}
|
||||
function invertedHex(){
|
||||
hexadecimal = "#" + convertToHex((15-placeR16)) + convertToHex((15-placeR1)) + convertToHex((15-placeG16)) + convertToHex((15-placeG1)) + convertToHex((15-placeB16)) + convertToHex((15-placeB1));
|
||||
return hexadecimal;
|
||||
}
|
||||
function convertToHex(num){
|
||||
var remainder = num - 9
|
||||
if(remainder<=0){
|
||||
return num.toString();
|
||||
}else{
|
||||
if(remainder==1){
|
||||
return "A";
|
||||
}else if(remainder == 2){
|
||||
return "B";
|
||||
}else if(remainder == 3){
|
||||
return "C";
|
||||
}else if(remainder == 4){
|
||||
return "D";
|
||||
}else if(remainder == 5){
|
||||
return "E";
|
||||
}else if(remainder == 6){
|
||||
return "F";
|
||||
}
|
||||
}
|
||||
}
|
||||
function convertToBinary(num){
|
||||
var result = ""
|
||||
if(num-8>=0){
|
||||
num = num-8;
|
||||
result = result + "1";
|
||||
}else{
|
||||
result = result + "0";
|
||||
}
|
||||
if(num-4>=0){
|
||||
num = num-4;
|
||||
result = result + "1";
|
||||
}else{
|
||||
result = result + "0";
|
||||
}
|
||||
if(num-2>=0){
|
||||
num = num-2;
|
||||
result = result + "1";
|
||||
}else{
|
||||
result = result + "0";
|
||||
}
|
||||
if(num-1>=0){
|
||||
num = num-1;
|
||||
result = result + "1";
|
||||
}else{
|
||||
result = result + "0";
|
||||
}
|
||||
return result
|
||||
}
|
||||
const LIGHT_MULTIPLIER = 100 / 15;
|
||||
const COLORS = ['R', 'G', 'B'];
|
||||
const PLACES = [1, 16];
|
||||
|
||||
function updateHex(customHex){
|
||||
if (customHex == null){
|
||||
let denary = 0;
|
||||
let redDenary = 0;
|
||||
let greenDenary = 0;
|
||||
let blueDenary = 0;
|
||||
let redBinary = "";
|
||||
let greenBinary = "";
|
||||
let blueBinary = "";
|
||||
let hexadecimal = "";
|
||||
|
||||
const places = {
|
||||
R16: 0, R1: 0,
|
||||
G16: 0, G1: 0,
|
||||
B16: 0, B1: 0
|
||||
};
|
||||
|
||||
function resetColours() {
|
||||
COLORS.forEach(color => {
|
||||
PLACES.forEach(place => {
|
||||
resetPlace(color, place);
|
||||
});
|
||||
});
|
||||
}
|
||||
|
||||
function resetPlace(color, place) {
|
||||
const placeKey = `${color}${place}`;
|
||||
places[placeKey] = 0;
|
||||
const light = (LIGHT_MULTIPLIER * places[placeKey]) / 100;
|
||||
document.getElementById(`blb${placeKey}`).style.opacity = light;
|
||||
updateColours();
|
||||
}
|
||||
|
||||
function togglePlace(color, place, direction) {
|
||||
const placeKey = `${color}${place}`;
|
||||
const currentValue = places[placeKey];
|
||||
if ((direction === 'up' && currentValue < 15) || (direction === 'down' && currentValue > 0)) {
|
||||
places[placeKey] += direction === 'up' ? 1 : -1;
|
||||
const light = (LIGHT_MULTIPLIER * places[placeKey]) / 100;
|
||||
document.getElementById(`blb${placeKey}`).style.opacity = light;
|
||||
updateColours();
|
||||
}
|
||||
}
|
||||
|
||||
function updateColours() {
|
||||
redDenary = (places.R16 * 16) + places.R1;
|
||||
greenDenary = (places.G16 * 16) + places.G1;
|
||||
blueDenary = (places.B16 * 16) + places.B1;
|
||||
|
||||
denary = `${redDenary}, ${greenDenary}, ${blueDenary}`;
|
||||
hexadecimal = `#${convertToHex(places.R16)}${convertToHex(places.R1)}${convertToHex(places.G16)}${convertToHex(places.G1)}${convertToHex(places.B16)}${convertToHex(places.B1)}`;
|
||||
|
||||
redBinary = `${convertToBinary(places.R16)}${convertToBinary(places.R1)}`;
|
||||
greenBinary = `${convertToBinary(places.G16)}${convertToBinary(places.G1)}`;
|
||||
blueBinary = `${convertToBinary(places.B16)}${convertToBinary(places.B1)}`;
|
||||
|
||||
document.getElementById("denaryNumber").innerHTML = denary;
|
||||
document.getElementById("hexadecimalNumber").innerHTML = hexadecimal;
|
||||
document.getElementById("colouredHex").style.backgroundColor = hexadecimal;
|
||||
document.getElementById("invertedHex").style.backgroundColor = invertedHex();
|
||||
document.getElementById("redBinaryNumber").innerHTML = redBinary;
|
||||
document.getElementById("blueBinaryNumber").innerHTML = blueBinary;
|
||||
document.getElementById("greenBinaryNumber").innerHTML = greenBinary;
|
||||
}
|
||||
|
||||
function invertedHex() {
|
||||
return `#${convertToHex(15 - places.R16)}${convertToHex(15 - places.R1)}${convertToHex(15 - places.G16)}${convertToHex(15 - places.G1)}${convertToHex(15 - places.B16)}${convertToHex(15 - places.B1)}`;
|
||||
}
|
||||
|
||||
function convertToHex(num) {
|
||||
return num < 10 ? num.toString() : String.fromCharCode(55 + num); // 55 = ASCII offset for A (65) - 10
|
||||
}
|
||||
|
||||
function convertToBinary(num) {
|
||||
return num.toString(2).padStart(4, '0');
|
||||
}
|
||||
|
||||
function updateHex(customHex) {
|
||||
if (!customHex) {
|
||||
resetColours();
|
||||
} else {
|
||||
if (customHex.charAt(0) === "#") customHex = customHex.slice(1);
|
||||
if (isHex(customHex) && customHex.length === 6) {
|
||||
customHex.split('').forEach((digit, i) => {
|
||||
const color = COLORS[Math.floor(i / 2)];
|
||||
const place = i % 2 === 0 ? 16 : 1;
|
||||
const placeKey = `${color}${place}`;
|
||||
places[placeKey] = parseInt(digit, 16);
|
||||
const light = (LIGHT_MULTIPLIER * places[placeKey]) / 100;
|
||||
document.getElementById(`blb${placeKey}`).style.opacity = light;
|
||||
});
|
||||
updateColours();
|
||||
} else {
|
||||
alert("Invalid Entry");
|
||||
resetColours();
|
||||
}else{
|
||||
let char = customHex.charAt(0);
|
||||
if(char == "#"){
|
||||
customHex = customHex.substring(1);
|
||||
}
|
||||
if (isHex(customHex)){
|
||||
let hexArray = customHex.split('');
|
||||
|
||||
placeR1 = parseInt(hexArray[1], 16);
|
||||
var lightR1 = (100/15 * placeR1) / 100;
|
||||
document.getElementById("blbR1").style.opacity = lightR1;
|
||||
|
||||
placeR16 = parseInt(hexArray[0], 16);
|
||||
var lightR16 = (100/15 * placeR16) / 100;
|
||||
document.getElementById("blbR2").style.opacity = lightR16;
|
||||
|
||||
placeG1 = parseInt(hexArray[3], 16);
|
||||
var lightG1 = (100/15 * placeG1) / 100;
|
||||
document.getElementById("blbG1").style.opacity = lightG1;
|
||||
|
||||
placeG16 = parseInt(hexArray[2], 16);
|
||||
var lightG16 = (100/15 * placeG16) / 100;
|
||||
document.getElementById("blbG2").style.opacity = lightG16;
|
||||
|
||||
placeB1 = parseInt(hexArray[5], 16);
|
||||
var lightB1 = (100/15 * placeB1) / 100;
|
||||
document.getElementById("blbB1").style.opacity = lightB1;
|
||||
|
||||
placeB16 = parseInt(hexArray[4], 16);
|
||||
var lightB16 = (100/15 * placeB16) / 100;
|
||||
document.getElementById("blbB2").style.opacity = lightB16;
|
||||
updateColours();
|
||||
}else{
|
||||
window.alert("Invalid Entry");
|
||||
resetColours();
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
function isHex(str) {
|
||||
regexp = /^[0-9a-fA-F]+$/;
|
||||
if (regexp.test(str)){
|
||||
return true;
|
||||
}else{
|
||||
return false;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
function requestHex(){
|
||||
let customHex = prompt("Please enter your Hex Value");
|
||||
updateHex(customHex);
|
||||
}
|
||||
|
||||
function invertHex(){
|
||||
customHex = invertedHex();
|
||||
updateHex(customHex);
|
||||
}
|
||||
function isHex(str) {
|
||||
return /^[0-9A-Fa-f]+$/.test(str);
|
||||
}
|
||||
|
||||
function requestHex() {
|
||||
const customHex = prompt("Please enter your Hex Value");
|
||||
updateHex(customHex);
|
||||
}
|
||||
|
||||
function invertHex() {
|
||||
updateHex(invertedHex());
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user