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,394 +1,210 @@
|
||||
denary = 0
|
||||
binary = ""
|
||||
customBinary = ""
|
||||
bit1 = false
|
||||
bit2 = false
|
||||
bit4 = false
|
||||
bit8 = false
|
||||
bit16 = false
|
||||
bit32 = false
|
||||
bit64 = false
|
||||
bit128 = false
|
||||
bit256 = false
|
||||
function resetBinarySimulator(){
|
||||
document.getElementById("blb256").classList.remove('poweredOn');
|
||||
document.getElementById("blb256").classList.add('poweredOff');
|
||||
document.getElementById("swt256").classList.remove('btnActive');
|
||||
bit256 = false;
|
||||
document.getElementById("blb128").classList.add('poweredOff');
|
||||
document.getElementById("blb128").classList.remove('poweredOn');
|
||||
document.getElementById("swt128").classList.remove('btnActive');
|
||||
bit128 = false;
|
||||
document.getElementById("blb64").classList.add('poweredOff');
|
||||
document.getElementById("blb64").classList.remove('poweredOn');
|
||||
document.getElementById("swt64").classList.remove('btnActive');
|
||||
bit64 = false;
|
||||
document.getElementById("blb32").classList.add('poweredOff');
|
||||
document.getElementById("blb32").classList.remove('poweredOn');
|
||||
document.getElementById("swt32").classList.remove('btnActive');
|
||||
bit32 = false;
|
||||
document.getElementById("blb16").classList.add('poweredOff');
|
||||
document.getElementById("blb16").classList.remove('poweredOn');
|
||||
document.getElementById("swt16").classList.remove('btnActive');
|
||||
bit16 = false;
|
||||
document.getElementById("blb8").classList.add('poweredOff');
|
||||
document.getElementById("blb8").classList.remove('poweredOn');
|
||||
document.getElementById("swt8").classList.remove('btnActive');
|
||||
bit8 = false;
|
||||
document.getElementById("blb4").classList.add('poweredOff');
|
||||
document.getElementById("blb4").classList.remove('poweredOn');
|
||||
document.getElementById("swt4").classList.remove('btnActive');
|
||||
bit4 = false;
|
||||
document.getElementById("blb2").classList.add('poweredOff');
|
||||
document.getElementById("blb2").classList.remove('poweredOn');
|
||||
document.getElementById("swt2").classList.remove('btnActive');
|
||||
bit2 = false;
|
||||
document.getElementById("blb1").classList.add('poweredOff');
|
||||
document.getElementById("blb1").classList.remove('poweredOn');
|
||||
document.getElementById("swt1").classList.remove('btnActive');
|
||||
bit1 = false;
|
||||
// ** Check if the filename contains "binary" **
|
||||
if (window.location.pathname.includes('binary')) {
|
||||
|
||||
let denary = 0;
|
||||
let bits = {
|
||||
'-128': false,
|
||||
'1': false,
|
||||
'2': false,
|
||||
'4': false,
|
||||
'8': false,
|
||||
'16': false,
|
||||
'32': false,
|
||||
'64': false,
|
||||
'128': false
|
||||
};
|
||||
|
||||
let bitValues = [];
|
||||
const twosComplementCheck = document.getElementById("blbN128");
|
||||
|
||||
// ** Initialize the bit values on page load **
|
||||
function initialize() {
|
||||
setBitValues(); // Set the bit values dynamically
|
||||
resetBinarySimulator(); // Reset the simulator to the initial state
|
||||
}
|
||||
|
||||
// ** Dynamically set bit values based on 2's complement mode **
|
||||
function setBitValues() {
|
||||
bitValues = twosComplementCheck
|
||||
? [-128, 64, 32, 16, 8, 4, 2, 1]
|
||||
: [128, 64, 32, 16, 8, 4, 2, 1];
|
||||
}
|
||||
|
||||
// ** Helper function to toggle power for a specific bit **
|
||||
function togglePower(bitValue, isActive) {
|
||||
const bitId = bitValue < 0 ? `N${Math.abs(bitValue)}` : bitValue;
|
||||
const bulb = document.getElementById(`blb${bitId}`);
|
||||
const switchBtn = document.getElementById(`swt${bitId}`);
|
||||
if (bulb && switchBtn) {
|
||||
bulb.classList.toggle('poweredOn', isActive);
|
||||
bulb.classList.toggle('poweredOff', !isActive);
|
||||
switchBtn.classList.toggle('btnActive', isActive);
|
||||
}
|
||||
}
|
||||
|
||||
// ** Reset all bits and denary **
|
||||
function resetBinarySimulator() {
|
||||
Object.keys(bits).forEach(bit => {
|
||||
togglePower(parseInt(bit, 10), false);
|
||||
bits[bit] = false;
|
||||
});
|
||||
denary = 0;
|
||||
updateBinary();
|
||||
}
|
||||
function changeClass256(){
|
||||
if (bit256){
|
||||
document.getElementById("blb256").classList.add('poweredOff');
|
||||
document.getElementById("blb256").classList.remove('poweredOn');
|
||||
document.getElementById("swt256").classList.remove('btnActive');
|
||||
bit256 = false;
|
||||
denary = denary - 256;
|
||||
updateBinary();
|
||||
}else{
|
||||
document.getElementById("blb256").classList.add('poweredOn');
|
||||
document.getElementById("blb256").classList.remove('poweredOff');
|
||||
document.getElementById("swt256").classList.add('btnActive');
|
||||
bit256 = true;
|
||||
denary = denary + 256;
|
||||
updateBinary();
|
||||
}
|
||||
}
|
||||
function changeClass128(){
|
||||
if (bit128){
|
||||
document.getElementById("blb128").classList.add('poweredOff');
|
||||
document.getElementById("blb128").classList.remove('poweredOn');
|
||||
document.getElementById("swt128").classList.remove('btnActive');
|
||||
bit128 = false;
|
||||
denary = denary - 128;
|
||||
updateBinary();
|
||||
}else{
|
||||
document.getElementById("blb128").classList.add('poweredOn');
|
||||
document.getElementById("blb128").classList.remove('poweredOff');
|
||||
document.getElementById("swt128").classList.add('btnActive');
|
||||
bit128 = true;
|
||||
denary = denary + 128;
|
||||
updateBinary();
|
||||
}
|
||||
}
|
||||
function changeClass64(){
|
||||
if (bit64){
|
||||
document.getElementById("blb64").classList.add('poweredOff');
|
||||
document.getElementById("blb64").classList.remove('poweredOn');
|
||||
document.getElementById("swt64").classList.remove('btnActive');
|
||||
bit64 = false;
|
||||
denary = denary - 64;
|
||||
updateBinary();
|
||||
}else{
|
||||
document.getElementById("blb64").classList.add('poweredOn');
|
||||
document.getElementById("blb64").classList.remove('poweredOff');
|
||||
document.getElementById("swt64").classList.add('btnActive');
|
||||
bit64 = true;
|
||||
denary = denary + 64;
|
||||
updateBinary();
|
||||
}
|
||||
}
|
||||
function changeClass32(){
|
||||
if (bit32){
|
||||
document.getElementById("blb32").classList.add('poweredOff');
|
||||
document.getElementById("blb32").classList.remove('poweredOn');
|
||||
document.getElementById("swt32").classList.remove('btnActive');
|
||||
bit32 = false;
|
||||
denary = denary - 32;
|
||||
updateBinary();
|
||||
}else{
|
||||
document.getElementById("blb32").classList.add('poweredOn');
|
||||
document.getElementById("blb32").classList.remove('poweredOff');
|
||||
document.getElementById("swt32").classList.add('btnActive');
|
||||
bit32 = true;
|
||||
denary = denary + 32;
|
||||
updateBinary();
|
||||
}
|
||||
}
|
||||
function changeClass16(){
|
||||
if (bit16){
|
||||
document.getElementById("blb16").classList.add('poweredOff');
|
||||
document.getElementById("blb16").classList.remove('poweredOn');
|
||||
document.getElementById("swt16").classList.remove('btnActive');
|
||||
bit16 = false;
|
||||
denary = denary - 16;
|
||||
updateBinary();
|
||||
}else{
|
||||
document.getElementById("blb16").classList.add('poweredOn');
|
||||
document.getElementById("blb16").classList.remove('poweredOff');
|
||||
document.getElementById("swt16").classList.add('btnActive');
|
||||
bit16 = true;
|
||||
denary = denary + 16;
|
||||
updateBinary();
|
||||
}
|
||||
}
|
||||
function changeClass8(){
|
||||
if (bit8){
|
||||
document.getElementById("blb8").classList.add('poweredOff');
|
||||
document.getElementById("blb8").classList.remove('poweredOn');
|
||||
document.getElementById("swt8").classList.remove('btnActive');
|
||||
bit8 = false;
|
||||
denary = denary - 8;
|
||||
updateBinary();
|
||||
}else{
|
||||
document.getElementById("blb8").classList.add('poweredOn');
|
||||
document.getElementById("blb8").classList.remove('poweredOff');
|
||||
document.getElementById("swt8").classList.add('btnActive');
|
||||
bit8 = true;
|
||||
denary = denary + 8;
|
||||
updateBinary();
|
||||
}
|
||||
}
|
||||
function changeClass4(){
|
||||
if (bit4){
|
||||
document.getElementById("blb4").classList.add('poweredOff');
|
||||
document.getElementById("blb4").classList.remove('poweredOn');
|
||||
document.getElementById("swt4").classList.remove('btnActive');
|
||||
bit4 = false;
|
||||
denary = denary - 4;
|
||||
updateBinary();
|
||||
}else{
|
||||
document.getElementById("blb4").classList.add('poweredOn');
|
||||
document.getElementById("blb4").classList.remove('poweredOff');
|
||||
document.getElementById("swt4").classList.add('btnActive');
|
||||
bit4 = true;
|
||||
denary = denary + 4;
|
||||
updateBinary();
|
||||
}
|
||||
}
|
||||
function changeClass2(){
|
||||
if (bit2){
|
||||
document.getElementById("blb2").classList.add('poweredOff');
|
||||
document.getElementById("blb2").classList.remove('poweredOn');
|
||||
document.getElementById("swt2").classList.remove('btnActive');
|
||||
bit2 = false;
|
||||
denary = denary - 2;
|
||||
updateBinary();
|
||||
}else{
|
||||
document.getElementById("blb2").classList.add('poweredOn');
|
||||
document.getElementById("blb2").classList.remove('poweredOff');
|
||||
document.getElementById("swt2").classList.add('btnActive');
|
||||
bit2 = true;
|
||||
denary = denary + 2;
|
||||
updateBinary();
|
||||
}
|
||||
}
|
||||
function changeClass1(){
|
||||
if (bit1){
|
||||
document.getElementById("blb1").classList.add('poweredOff');
|
||||
document.getElementById("blb1").classList.remove('poweredOn');
|
||||
document.getElementById("swt1").classList.remove('btnActive');
|
||||
bit1 = false;
|
||||
denary = denary - 1;
|
||||
updateBinary();
|
||||
}else{
|
||||
document.getElementById("blb1").classList.add('poweredOn');
|
||||
document.getElementById("blb1").classList.remove('poweredOff');
|
||||
document.getElementById("swt1").classList.add('btnActive');
|
||||
bit1 = true;
|
||||
denary = denary + 1;
|
||||
updateBinary();
|
||||
}
|
||||
}
|
||||
|
||||
function updateBinary(){
|
||||
binary = ""
|
||||
if(bit256){
|
||||
binary = binary + "1"
|
||||
}else{
|
||||
binary = binary + "0"
|
||||
// ** Toggle a specific bit **
|
||||
function changeBit(bitValue) {
|
||||
const key = getBitKey(bitValue);
|
||||
const isActive = bits[key];
|
||||
togglePower(bitValue, !isActive);
|
||||
bits[key] = !isActive;
|
||||
denary += isActive ? -bitValue : bitValue;
|
||||
updateBinary();
|
||||
}
|
||||
if(bit128){
|
||||
binary = binary + "1"
|
||||
}else{
|
||||
binary = binary + "0"
|
||||
}
|
||||
if(bit64){
|
||||
binary = binary + "1"
|
||||
}else{
|
||||
binary = binary + "0"
|
||||
}
|
||||
if(bit32){
|
||||
binary = binary + "1"
|
||||
}else{
|
||||
binary = binary + "0"
|
||||
}
|
||||
if(bit16){
|
||||
binary = binary + "1"
|
||||
}else{
|
||||
binary = binary + "0"
|
||||
}
|
||||
if(bit8){
|
||||
binary = binary + "1"
|
||||
}else{
|
||||
binary = binary + "0"
|
||||
}
|
||||
if(bit4){
|
||||
binary = binary + "1"
|
||||
}else{
|
||||
binary = binary + "0"
|
||||
}
|
||||
if(bit2){
|
||||
binary = binary + "1"
|
||||
}else{
|
||||
binary = binary + "0"
|
||||
}
|
||||
if(bit1){
|
||||
binary = binary + "1"
|
||||
}else{
|
||||
binary = binary + "0"
|
||||
}
|
||||
document.getElementById("denaryNumber").innerHTML = denary;
|
||||
document.getElementById("binaryNumber").innerHTML = binary;
|
||||
}
|
||||
|
||||
function convertToBinary(num){
|
||||
var result = ""
|
||||
if(num-8>=0){
|
||||
num = num-8;
|
||||
result = result + "1";
|
||||
}else{
|
||||
result = result + "0";
|
||||
// ** Update binary string and denary display **
|
||||
function updateBinary() {
|
||||
const binary = bitValues.map(bit => (bits[getBitKey(bit)] ? '1' : '0')).join('');
|
||||
document.getElementById("denaryNumber").innerText = denary;
|
||||
document.getElementById("binaryNumber").innerText = binary;
|
||||
}
|
||||
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
|
||||
}
|
||||
|
||||
function binaryParser(binaryPattern){
|
||||
for (let i = 0; i < binaryPattern.length; i++) {
|
||||
if ((binaryPattern[i] == 0) || (binaryPattern[i] == 1)){
|
||||
validInput = true;
|
||||
}else{
|
||||
validInput = false;
|
||||
alert("Invalid pattern! Digit\n"+ i+" is not a 0 or a 1.\nIt is a "+ binaryPattern[i]);
|
||||
return validInput
|
||||
};
|
||||
};
|
||||
return validInput;
|
||||
}
|
||||
|
||||
function customBinaryParser(binaryPattern){
|
||||
resetBinarySimulator();
|
||||
missingDigits = 9 - binaryPattern.length
|
||||
for (let j = 0; j < missingDigits; j++){
|
||||
binaryPattern = 0 + binaryPattern;
|
||||
};
|
||||
for (let i = 0; i < binaryPattern.length; i++) {
|
||||
if (binaryPattern[i] == 1){
|
||||
if (i == 0){
|
||||
changeClass256();
|
||||
}else if (i == 1){
|
||||
changeClass128();
|
||||
}else if (i == 2){
|
||||
changeClass64();
|
||||
}else if (i == 3){
|
||||
changeClass32();
|
||||
}else if (i == 4){
|
||||
changeClass16();
|
||||
}else if (i == 5){
|
||||
changeClass8();
|
||||
}else if (i == 6){
|
||||
changeClass4();
|
||||
}else if (i == 7){
|
||||
changeClass2();
|
||||
}else if (i == 8){
|
||||
changeClass1();
|
||||
// ** Parse a custom binary string and set bits accordingly **
|
||||
function customBinaryParser(binaryPattern) {
|
||||
resetBinarySimulator();
|
||||
binaryPattern = binaryPattern.padStart(8, '0'); // Ensure 8-bit format
|
||||
binaryPattern.split('').forEach((bit, index) => {
|
||||
if (bit === '1') {
|
||||
changeBit(bitValues[index]);
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
// ** Parse a custom denary value and set bits accordingly **
|
||||
function customDenaryParser(customDenary) {
|
||||
const min = twosComplementCheck ? -128 : 0;
|
||||
const max = twosComplementCheck ? 127 : 255;
|
||||
|
||||
if (customDenary === null) {
|
||||
customDenary = 0; // Default to 0 if user cancels input
|
||||
}
|
||||
|
||||
if (customDenary < min || customDenary > max) {
|
||||
alert(`Invalid input! Please enter a denary value between ${min} and ${max}.`);
|
||||
return requestDenary(); // Prompt user again
|
||||
}
|
||||
|
||||
resetBinarySimulator();
|
||||
if (twosComplementCheck && customDenary < 0) {
|
||||
let absDenary = Math.abs(customDenary);
|
||||
if (customDenary === -128) {
|
||||
changeBit(-128);
|
||||
} else {
|
||||
bitValues.forEach(bit => {
|
||||
if (absDenary >= Math.abs(bit)) {
|
||||
changeBit(bit);
|
||||
absDenary -= Math.abs(bit);
|
||||
}
|
||||
});
|
||||
twosComplementFlip();
|
||||
}
|
||||
} else {
|
||||
bitValues.forEach(bit => {
|
||||
if (customDenary >= Math.abs(bit)) {
|
||||
changeBit(bit);
|
||||
customDenary -= Math.abs(bit);
|
||||
}
|
||||
});
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
function requestBinary(){
|
||||
do{
|
||||
customBinary = prompt("Please enter your 9-bit Binary Value");
|
||||
if (customBinary){
|
||||
var binaryLength = customBinary.length;
|
||||
}else{
|
||||
var binaryLength = 0;
|
||||
};
|
||||
do{
|
||||
if (binaryLength>9){
|
||||
customBinary = prompt("Too many digits.\n\nPlease enter your 9-bit Binary Value");
|
||||
if (customBinary){
|
||||
binaryLength = customBinary.length;
|
||||
}else{
|
||||
binaryLength = 0;
|
||||
};
|
||||
};
|
||||
} while (binaryLength > 9);
|
||||
let validInput = binaryParser(customBinary);
|
||||
} while (!validInput);
|
||||
customBinaryParser(customBinary);
|
||||
}
|
||||
// ** Handle logical binary shifting (left or right) **
|
||||
function shiftBinary(direction) {
|
||||
const binaryString = document.getElementById("binaryNumber").innerText;
|
||||
let shiftedBinary;
|
||||
if (direction === 'left') {
|
||||
shiftedBinary = binaryString.slice(1) + '0';
|
||||
} else if (direction === 'right') {
|
||||
shiftedBinary = '0' + binaryString.slice(0, -1);
|
||||
}
|
||||
customBinaryParser(shiftedBinary);
|
||||
}
|
||||
|
||||
function customDenaryParser(customDenary){
|
||||
resetBinarySimulator();
|
||||
let columnValues = [256,128,64,32,16,8,4,2,1]
|
||||
for (let i = 0; i < 10; i++) {
|
||||
if (!(customDenary-columnValues[i] < 0)){
|
||||
customDenary = customDenary - columnValues[i];
|
||||
if (i == 0){
|
||||
changeClass256();
|
||||
}else if (i == 1){
|
||||
changeClass128();
|
||||
}else if (i == 2){
|
||||
changeClass64();
|
||||
}else if (i == 3){
|
||||
changeClass32();
|
||||
}else if (i == 4){
|
||||
changeClass16();
|
||||
}else if (i == 5){
|
||||
changeClass8();
|
||||
}else if (i == 6){
|
||||
changeClass4();
|
||||
}else if (i == 7){
|
||||
changeClass2();
|
||||
}else if (i == 8){
|
||||
changeClass1();
|
||||
}
|
||||
if (customDenary == 0){
|
||||
// ** Handle arithmetic shifting for 2's complement **
|
||||
function shiftTwosComplement(direction) {
|
||||
const binaryString = document.getElementById("binaryNumber").innerText;
|
||||
let shiftedBinary;
|
||||
if (direction === 'left') {
|
||||
shiftedBinary = binaryString.slice(1) + '0';
|
||||
} else if (direction === 'right') {
|
||||
shiftedBinary = binaryString[0] + binaryString.slice(0, -1);
|
||||
}
|
||||
customBinaryParser(shiftedBinary);
|
||||
}
|
||||
|
||||
// ** Flip binary bits for 2's complement **
|
||||
function twosComplementFlip() {
|
||||
let binary = document.getElementById("binaryNumber").innerText;
|
||||
const flippedBinary = binary.split('').map(bit => (bit === '1' ? '0' : '1')).join('');
|
||||
const result = addBinaryNumbers(flippedBinary, '00000001');
|
||||
customBinaryParser(result.binaryResult);
|
||||
}
|
||||
|
||||
// ** Add two binary numbers **
|
||||
function addBinaryNumbers(binary1, binary2) {
|
||||
let carry = 0;
|
||||
let result = '';
|
||||
for (let i = 7; i >= 0; i--) {
|
||||
const bit1 = parseInt(binary1[i], 10) || 0;
|
||||
const bit2 = parseInt(binary2[i], 10) || 0;
|
||||
const sum = bit1 + bit2 + carry;
|
||||
result = (sum % 2) + result;
|
||||
carry = Math.floor(sum / 2);
|
||||
}
|
||||
return { binaryResult: result.slice(-8), overflow: carry ? '1' : '0' };
|
||||
}
|
||||
|
||||
// ** Helper to normalize bit keys **
|
||||
function getBitKey(bitValue) {
|
||||
return bitValue < 0 ? `N${Math.abs(bitValue)}` : bitValue.toString();
|
||||
}
|
||||
|
||||
// ** Request binary input from user **
|
||||
function requestBinary() {
|
||||
let binary;
|
||||
do {
|
||||
binary = prompt("Please enter an 8-bit Binary Value (only 0s and 1s are allowed):");
|
||||
if (binary === null) {
|
||||
binary = "00000000"; // Default to 0 if user cancels input
|
||||
break;
|
||||
}
|
||||
}
|
||||
if (!/^[01]{1,8}$/.test(binary)) {
|
||||
alert("Invalid input! Binary values must be up to 8 digits long and only contain 0 or 1.");
|
||||
}
|
||||
} while (!/^[01]{1,8}$/.test(binary));
|
||||
customBinaryParser(binary);
|
||||
}
|
||||
}
|
||||
|
||||
function requestDenary(){
|
||||
customDenary = prompt("Please enter your Denary Value\nMax value is 511");
|
||||
do{
|
||||
if (customDenary > 511){
|
||||
customDenary = prompt("Number too large.\n\nPlease enter your Denary Value.\nMax value is 511");
|
||||
};
|
||||
} while (customDenary > 511);
|
||||
customDenaryParser(customDenary);
|
||||
// ** Request denary input from user **
|
||||
function requestDenary() {
|
||||
let customDenary;
|
||||
const min = twosComplementCheck ? -128 : 0;
|
||||
const max = twosComplementCheck ? 127 : 255;
|
||||
|
||||
do {
|
||||
customDenary = prompt(`Enter a Denary Value (${min} to ${max}):`);
|
||||
if (customDenary === null) {
|
||||
customDenary = 0; // Default to 0 if user cancels input
|
||||
break;
|
||||
}
|
||||
customDenary = parseInt(customDenary, 10);
|
||||
if (isNaN(customDenary) || customDenary < min || customDenary > max) {
|
||||
alert(`Invalid input! Please enter a denary value between ${min} and ${max}.`);
|
||||
}
|
||||
} while (isNaN(customDenary) || customDenary < min || customDenary > max);
|
||||
customDenaryParser(customDenary);
|
||||
}
|
||||
|
||||
// ** On page load, initialize the simulator **
|
||||
document.addEventListener("DOMContentLoaded", initialize);
|
||||
}
|
||||
@@ -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());
|
||||
}
|
||||
|
||||
@@ -1,159 +1,63 @@
|
||||
denary = 0
|
||||
binary = ""
|
||||
hexadecimal = ""
|
||||
place1 = 0
|
||||
place16 = 0
|
||||
place256 = 0
|
||||
place4096 = 0
|
||||
slider4096 = document.getElementById("slider4096");
|
||||
slider256 = document.getElementById("slider256");
|
||||
let hexadecimalNumber = document.getElementById("hexadecimalNumber").textContent;
|
||||
let hexLength = hexadecimalNumber.length
|
||||
if(hexLength==4){
|
||||
slider4096.addEventListener("change", update4096);
|
||||
slider256.addEventListener("change", update256);
|
||||
}
|
||||
slider16 = document.getElementById("slider16");
|
||||
slider1 = document.getElementById("slider1");
|
||||
slider16.addEventListener("change", update16);
|
||||
slider1.addEventListener("change", update1);
|
||||
// Ensure the script only runs if the URL path contains "hexadecimal"
|
||||
if (window.location.pathname.includes('hexadecimal')) {
|
||||
|
||||
function resetHexadecimal(){
|
||||
let hexadecimalNumber = document.getElementById("hexadecimalNumber").textContent;
|
||||
let hexLength = hexadecimalNumber.length;
|
||||
if(hexLength==4){
|
||||
resetPlace4096();
|
||||
resetPlace256();
|
||||
}
|
||||
resetPlace16();
|
||||
resetPlace1();
|
||||
}
|
||||
function resetPlace4096(){
|
||||
place4096 = 0;
|
||||
document.getElementById("slider4096").value=0;
|
||||
var light4096 = (100/15 * place4096) / 100;
|
||||
document.getElementById("blb4").style.opacity = light4096;
|
||||
updateNumbers();
|
||||
}
|
||||
function resetPlace256(){
|
||||
place256 = 0;
|
||||
document.getElementById("slider256").value=0;
|
||||
var light256 = (100/15 * place256) / 100;
|
||||
document.getElementById("blb3").style.opacity = light256;
|
||||
updateNumbers();
|
||||
}
|
||||
function resetPlace16(){
|
||||
place16 = 0;
|
||||
document.getElementById("slider16").value=0;
|
||||
var light16 = (100/15 * place16) / 100;
|
||||
document.getElementById("blb2").style.opacity = light16;
|
||||
updateNumbers();
|
||||
}
|
||||
function resetPlace1(){
|
||||
place1 = 0;
|
||||
document.getElementById("slider1").value=0;
|
||||
var light1 = (100/15 * place1) / 100;
|
||||
document.getElementById("blb1").style.opacity = light1;
|
||||
updateNumbers();
|
||||
}
|
||||
function update4096(){
|
||||
place4096 = document.getElementById("slider4096").value;
|
||||
var light4096 = (100/15 * place4096) / 100;
|
||||
document.getElementById("blb4").style.opacity = light4096;
|
||||
updateNumbers();
|
||||
}
|
||||
function update256(){
|
||||
place256 = document.getElementById("slider256").value;
|
||||
var light256 = (100/15 * place256) / 100;
|
||||
document.getElementById("blb3").style.opacity = light256;
|
||||
updateNumbers();
|
||||
}
|
||||
function update16(){
|
||||
place16 = document.getElementById("slider16").value;
|
||||
var light16 = (100/15 * place16) / 100;
|
||||
document.getElementById("blb2").style.opacity = light16;
|
||||
updateNumbers();
|
||||
}
|
||||
function update1(){
|
||||
place1 = document.getElementById("slider1").value;
|
||||
var light1 = (100/15 * place1) / 100;
|
||||
document.getElementById("blb1").style.opacity = light1;
|
||||
updateNumbers();
|
||||
}
|
||||
function updateNumbers(){
|
||||
binary = "";
|
||||
hexadecimal = "";
|
||||
let hexadecimalNumber = document.getElementById("hexadecimalNumber").textContent;
|
||||
let hexLength = hexadecimalNumber.length;
|
||||
if(hexLength==4){
|
||||
denary = (place4096*4096)+(place256*256)+(place16*16)+(place1);
|
||||
hexadecimal = convertToHex(place4096) + convertToHex(place256) + convertToHex(place16) + convertToHex(place1);
|
||||
binary = convertToBinary(place4096) + convertToBinary(place256) + convertToBinary(place16) + convertToBinary(place1);
|
||||
}else if(hexLength==2){
|
||||
denary = (place16*16)+(place1);
|
||||
hexadecimal = convertToHex(place16) + convertToHex(place1);
|
||||
binary = convertToBinary(place16) + convertToBinary(place1);
|
||||
}
|
||||
document.getElementById("denaryNumber").innerHTML = denary;
|
||||
document.getElementById("hexadecimalNumber").innerHTML = hexadecimal;
|
||||
document.getElementById("binaryNumber").innerHTML = binary;
|
||||
}
|
||||
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";
|
||||
const isGCSE = window.location.pathname.includes('gcse-hexadecimal');
|
||||
const hexLength = isGCSE ? 2 : 4;
|
||||
const binaryLength = isGCSE ? 8 : 16;
|
||||
const maxDenary = isGCSE ? 255 : 65535;
|
||||
|
||||
const placeValues = { 1: 0, 16: 0, 256: 0, 4096: 0 };
|
||||
const sliders = {};
|
||||
const columnValues = isGCSE ? [16, 1] : [4096, 256, 16, 1];
|
||||
|
||||
// Attach event listeners for sliders
|
||||
['slider1', 'slider16', 'slider256', 'slider4096'].forEach((sliderId) => {
|
||||
const slider = document.getElementById(sliderId);
|
||||
if (slider) {
|
||||
sliders[sliderId] = slider;
|
||||
slider.addEventListener("input", (e) => {
|
||||
e.stopPropagation(); // Prevent event propagation to Bootstrap
|
||||
updatePlace(parseInt(sliderId.replace('slider', ''), 10));
|
||||
});
|
||||
}
|
||||
});
|
||||
|
||||
function updatePlace(place) {
|
||||
if (sliders[`slider${place}`]) {
|
||||
placeValues[place] = parseInt(sliders[`slider${place}`].value, 10);
|
||||
updateNumbers();
|
||||
}
|
||||
}
|
||||
}
|
||||
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
|
||||
}
|
||||
|
||||
function updateHexNumber(){
|
||||
let hexadecimalNumber = document.getElementById("hexadecimalNumber").textContent;
|
||||
let hexLength = hexadecimalNumber.length
|
||||
if(hexLength==4){
|
||||
update4096();
|
||||
update256();
|
||||
}
|
||||
update16();
|
||||
update1();
|
||||
}
|
||||
function updateNumbers() {
|
||||
let denary = 0;
|
||||
let binary = '';
|
||||
let hexadecimal = '';
|
||||
|
||||
columnValues.forEach((column) => {
|
||||
const value = placeValues[column];
|
||||
denary += value * column;
|
||||
binary += convertToBinary(value);
|
||||
hexadecimal += convertToHex(value);
|
||||
});
|
||||
|
||||
binary = binary.slice(-binaryLength).padStart(binaryLength, '0');
|
||||
hexadecimal = hexadecimal.slice(-hexLength).padStart(hexLength, '0');
|
||||
|
||||
document.getElementById("binaryNumber").innerText = binary;
|
||||
document.getElementById("denaryNumber").innerText = denary;
|
||||
document.getElementById("hexadecimalNumber").innerText = hexadecimal;
|
||||
}
|
||||
|
||||
function convertToBinary(num) {
|
||||
return num.toString(2).padStart(4, '0');
|
||||
}
|
||||
|
||||
function convertToHex(num) {
|
||||
return num.toString(16).toUpperCase();
|
||||
}
|
||||
|
||||
document.addEventListener('DOMContentLoaded', () => {
|
||||
updateNumbers();
|
||||
});
|
||||
}
|
||||
|
||||
@@ -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)
|
||||
}
|
||||
}
|
||||
|
||||
1
Export/assets/js/script.min.js
vendored
1
Export/assets/js/script.min.js
vendored
File diff suppressed because one or more lines are too long
Reference in New Issue
Block a user