alexander.lyall/CS-Box
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases 4 Wiki Activity

Wave 1 Beta Release

Browse Source 
# 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:
Alexander Lyall
2024-12-07 22:49:29 +00:00
parent 0f7711fbb5
commit 93b5f11abe
25 changed files with 1662 additions and 1307 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
Export/assets/bootstrap/css/bootstrap.min.css vendored
View File

File diff suppressed because one or more lines are too long

140
Export/assets/css/Inter.css
View File

@@ -1,6 +1,6 @@
@font-face {
font-family: 'Inter';
src: url(/assets/fonts/Inter-501638185f142ea970e06ff6a896cf44.woff2?h=19ed85aa2b2b2d862393d46e9e4754c1) format('woff2');
src: url(/assets/fonts/Inter-501638185f142ea970e06ff6a896cf44.woff2?h=f82c468f680071d6d4613192864eed27) format('woff2');
font-weight: 300;
font-style: italic;
font-display: swap;
@@ -9,7 +9,7 @@
@font-face {
font-family: 'Inter';
src: url(/assets/fonts/Inter-d845be6713e4acd3766e1f8f6418c97e.woff2?h=19ed85aa2b2b2d862393d46e9e4754c1) format('woff2');
src: url(/assets/fonts/Inter-d845be6713e4acd3766e1f8f6418c97e.woff2?h=f82c468f680071d6d4613192864eed27) format('woff2');
font-weight: 300;
font-style: italic;
font-display: swap;
@@ -18,7 +18,7 @@
@font-face {
font-family: 'Inter';
src: url(/assets/fonts/Inter-8d07e5f373f5bb3603b3e139f63e3386.woff2?h=19ed85aa2b2b2d862393d46e9e4754c1) format('woff2');
src: url(/assets/fonts/Inter-8d07e5f373f5bb3603b3e139f63e3386.woff2?h=f82c468f680071d6d4613192864eed27) format('woff2');
font-weight: 300;
font-style: italic;
font-display: swap;
@@ -27,7 +27,7 @@
@font-face {
font-family: 'Inter';
src: url(/assets/fonts/Inter-8e1d10adf40d7223fbee98b930853a8a.woff2?h=19ed85aa2b2b2d862393d46e9e4754c1) format('woff2');
src: url(/assets/fonts/Inter-8e1d10adf40d7223fbee98b930853a8a.woff2?h=f82c468f680071d6d4613192864eed27) format('woff2');
font-weight: 300;
font-style: italic;
font-display: swap;
@@ -36,7 +36,7 @@
@font-face {
font-family: 'Inter';
src: url(/assets/fonts/Inter-db78de5246196d0d93187248cbebc6c2.woff2?h=19ed85aa2b2b2d862393d46e9e4754c1) format('woff2');
src: url(/assets/fonts/Inter-db78de5246196d0d93187248cbebc6c2.woff2?h=f82c468f680071d6d4613192864eed27) format('woff2');
font-weight: 300;
font-style: italic;
font-display: swap;
@@ -45,7 +45,7 @@
@font-face {
font-family: 'Inter';
src: url(/assets/fonts/Inter-6b97bb4aa11fb6d8c29b378b87c8ce45.woff2?h=19ed85aa2b2b2d862393d46e9e4754c1) format('woff2');
src: url(/assets/fonts/Inter-6b97bb4aa11fb6d8c29b378b87c8ce45.woff2?h=f82c468f680071d6d4613192864eed27) format('woff2');
font-weight: 300;
font-style: italic;
font-display: swap;
@@ -54,7 +54,7 @@
@font-face {
font-family: 'Inter';
src: url(/assets/fonts/Inter-69c9fb2f299f5f5be8d2800cd24271f9.woff2?h=19ed85aa2b2b2d862393d46e9e4754c1) format('woff2');
src: url(/assets/fonts/Inter-69c9fb2f299f5f5be8d2800cd24271f9.woff2?h=f82c468f680071d6d4613192864eed27) format('woff2');
font-weight: 300;
font-style: italic;
font-display: swap;
@@ -63,7 +63,7 @@
@font-face {
font-family: 'Inter';
src: url(/assets/fonts/Inter-501638185f142ea970e06ff6a896cf44.woff2?h=19ed85aa2b2b2d862393d46e9e4754c1) format('woff2');
src: url(/assets/fonts/Inter-501638185f142ea970e06ff6a896cf44.woff2?h=f82c468f680071d6d4613192864eed27) format('woff2');
font-weight: 400;
font-style: italic;
font-display: swap;
@@ -72,7 +72,7 @@
@font-face {
font-family: 'Inter';
src: url(/assets/fonts/Inter-d845be6713e4acd3766e1f8f6418c97e.woff2?h=19ed85aa2b2b2d862393d46e9e4754c1) format('woff2');
src: url(/assets/fonts/Inter-d845be6713e4acd3766e1f8f6418c97e.woff2?h=f82c468f680071d6d4613192864eed27) format('woff2');
font-weight: 400;
font-style: italic;
font-display: swap;
@@ -81,7 +81,7 @@
@font-face {
font-family: 'Inter';
src: url(/assets/fonts/Inter-8d07e5f373f5bb3603b3e139f63e3386.woff2?h=19ed85aa2b2b2d862393d46e9e4754c1) format('woff2');
src: url(/assets/fonts/Inter-8d07e5f373f5bb3603b3e139f63e3386.woff2?h=f82c468f680071d6d4613192864eed27) format('woff2');
font-weight: 400;
font-style: italic;
font-display: swap;
@@ -90,7 +90,7 @@
@font-face {
font-family: 'Inter';
src: url(/assets/fonts/Inter-8e1d10adf40d7223fbee98b930853a8a.woff2?h=19ed85aa2b2b2d862393d46e9e4754c1) format('woff2');
src: url(/assets/fonts/Inter-8e1d10adf40d7223fbee98b930853a8a.woff2?h=f82c468f680071d6d4613192864eed27) format('woff2');
font-weight: 400;
font-style: italic;
font-display: swap;
@@ -99,7 +99,7 @@
@font-face {
font-family: 'Inter';
src: url(/assets/fonts/Inter-db78de5246196d0d93187248cbebc6c2.woff2?h=19ed85aa2b2b2d862393d46e9e4754c1) format('woff2');
src: url(/assets/fonts/Inter-db78de5246196d0d93187248cbebc6c2.woff2?h=f82c468f680071d6d4613192864eed27) format('woff2');
font-weight: 400;
font-style: italic;
font-display: swap;
@@ -108,7 +108,7 @@
@font-face {
font-family: 'Inter';
src: url(/assets/fonts/Inter-6b97bb4aa11fb6d8c29b378b87c8ce45.woff2?h=19ed85aa2b2b2d862393d46e9e4754c1) format('woff2');
src: url(/assets/fonts/Inter-6b97bb4aa11fb6d8c29b378b87c8ce45.woff2?h=f82c468f680071d6d4613192864eed27) format('woff2');
font-weight: 400;
font-style: italic;
font-display: swap;
@@ -117,7 +117,7 @@
@font-face {
font-family: 'Inter';
src: url(/assets/fonts/Inter-69c9fb2f299f5f5be8d2800cd24271f9.woff2?h=19ed85aa2b2b2d862393d46e9e4754c1) format('woff2');
src: url(/assets/fonts/Inter-69c9fb2f299f5f5be8d2800cd24271f9.woff2?h=f82c468f680071d6d4613192864eed27) format('woff2');
font-weight: 400;
font-style: italic;
font-display: swap;
@@ -126,7 +126,7 @@
@font-face {
font-family: 'Inter';
src: url(/assets/fonts/Inter-501638185f142ea970e06ff6a896cf44.woff2?h=19ed85aa2b2b2d862393d46e9e4754c1) format('woff2');
src: url(/assets/fonts/Inter-501638185f142ea970e06ff6a896cf44.woff2?h=f82c468f680071d6d4613192864eed27) format('woff2');
font-weight: 600;
font-style: italic;
font-display: swap;
@@ -135,7 +135,7 @@
@font-face {
font-family: 'Inter';
src: url(/assets/fonts/Inter-d845be6713e4acd3766e1f8f6418c97e.woff2?h=19ed85aa2b2b2d862393d46e9e4754c1) format('woff2');
src: url(/assets/fonts/Inter-d845be6713e4acd3766e1f8f6418c97e.woff2?h=f82c468f680071d6d4613192864eed27) format('woff2');
font-weight: 600;
font-style: italic;
font-display: swap;
@@ -144,7 +144,7 @@
@font-face {
font-family: 'Inter';
src: url(/assets/fonts/Inter-8d07e5f373f5bb3603b3e139f63e3386.woff2?h=19ed85aa2b2b2d862393d46e9e4754c1) format('woff2');
src: url(/assets/fonts/Inter-8d07e5f373f5bb3603b3e139f63e3386.woff2?h=f82c468f680071d6d4613192864eed27) format('woff2');
font-weight: 600;
font-style: italic;
font-display: swap;
@@ -153,7 +153,7 @@
@font-face {
font-family: 'Inter';
src: url(/assets/fonts/Inter-8e1d10adf40d7223fbee98b930853a8a.woff2?h=19ed85aa2b2b2d862393d46e9e4754c1) format('woff2');
src: url(/assets/fonts/Inter-8e1d10adf40d7223fbee98b930853a8a.woff2?h=f82c468f680071d6d4613192864eed27) format('woff2');
font-weight: 600;
font-style: italic;
font-display: swap;
@@ -162,7 +162,7 @@
@font-face {
font-family: 'Inter';
src: url(/assets/fonts/Inter-db78de5246196d0d93187248cbebc6c2.woff2?h=19ed85aa2b2b2d862393d46e9e4754c1) format('woff2');
src: url(/assets/fonts/Inter-db78de5246196d0d93187248cbebc6c2.woff2?h=f82c468f680071d6d4613192864eed27) format('woff2');
font-weight: 600;
font-style: italic;
font-display: swap;
@@ -171,7 +171,7 @@
@font-face {
font-family: 'Inter';
src: url(/assets/fonts/Inter-6b97bb4aa11fb6d8c29b378b87c8ce45.woff2?h=19ed85aa2b2b2d862393d46e9e4754c1) format('woff2');
src: url(/assets/fonts/Inter-6b97bb4aa11fb6d8c29b378b87c8ce45.woff2?h=f82c468f680071d6d4613192864eed27) format('woff2');
font-weight: 600;
font-style: italic;
font-display: swap;
@@ -180,7 +180,7 @@
@font-face {
font-family: 'Inter';
src: url(/assets/fonts/Inter-69c9fb2f299f5f5be8d2800cd24271f9.woff2?h=19ed85aa2b2b2d862393d46e9e4754c1) format('woff2');
src: url(/assets/fonts/Inter-69c9fb2f299f5f5be8d2800cd24271f9.woff2?h=f82c468f680071d6d4613192864eed27) format('woff2');
font-weight: 600;
font-style: italic;
font-display: swap;
@@ -189,7 +189,7 @@
@font-face {
font-family: 'Inter';
src: url(/assets/fonts/Inter-501638185f142ea970e06ff6a896cf44.woff2?h=19ed85aa2b2b2d862393d46e9e4754c1) format('woff2');
src: url(/assets/fonts/Inter-501638185f142ea970e06ff6a896cf44.woff2?h=f82c468f680071d6d4613192864eed27) format('woff2');
font-weight: 700;
font-style: italic;
font-display: swap;
@@ -198,7 +198,7 @@
@font-face {
font-family: 'Inter';
src: url(/assets/fonts/Inter-d845be6713e4acd3766e1f8f6418c97e.woff2?h=19ed85aa2b2b2d862393d46e9e4754c1) format('woff2');
src: url(/assets/fonts/Inter-d845be6713e4acd3766e1f8f6418c97e.woff2?h=f82c468f680071d6d4613192864eed27) format('woff2');
font-weight: 700;
font-style: italic;
font-display: swap;
@@ -207,7 +207,7 @@
@font-face {
font-family: 'Inter';
src: url(/assets/fonts/Inter-8d07e5f373f5bb3603b3e139f63e3386.woff2?h=19ed85aa2b2b2d862393d46e9e4754c1) format('woff2');
src: url(/assets/fonts/Inter-8d07e5f373f5bb3603b3e139f63e3386.woff2?h=f82c468f680071d6d4613192864eed27) format('woff2');
font-weight: 700;
font-style: italic;
font-display: swap;
@@ -216,7 +216,7 @@
@font-face {
font-family: 'Inter';
src: url(/assets/fonts/Inter-8e1d10adf40d7223fbee98b930853a8a.woff2?h=19ed85aa2b2b2d862393d46e9e4754c1) format('woff2');
src: url(/assets/fonts/Inter-8e1d10adf40d7223fbee98b930853a8a.woff2?h=f82c468f680071d6d4613192864eed27) format('woff2');
font-weight: 700;
font-style: italic;
font-display: swap;
@@ -225,7 +225,7 @@
@font-face {
font-family: 'Inter';
src: url(/assets/fonts/Inter-db78de5246196d0d93187248cbebc6c2.woff2?h=19ed85aa2b2b2d862393d46e9e4754c1) format('woff2');
src: url(/assets/fonts/Inter-db78de5246196d0d93187248cbebc6c2.woff2?h=f82c468f680071d6d4613192864eed27) format('woff2');
font-weight: 700;
font-style: italic;
font-display: swap;
@@ -234,7 +234,7 @@
@font-face {
font-family: 'Inter';
src: url(/assets/fonts/Inter-6b97bb4aa11fb6d8c29b378b87c8ce45.woff2?h=19ed85aa2b2b2d862393d46e9e4754c1) format('woff2');
src: url(/assets/fonts/Inter-6b97bb4aa11fb6d8c29b378b87c8ce45.woff2?h=f82c468f680071d6d4613192864eed27) format('woff2');
font-weight: 700;
font-style: italic;
font-display: swap;
@@ -243,7 +243,7 @@
@font-face {
font-family: 'Inter';
src: url(/assets/fonts/Inter-69c9fb2f299f5f5be8d2800cd24271f9.woff2?h=19ed85aa2b2b2d862393d46e9e4754c1) format('woff2');
src: url(/assets/fonts/Inter-69c9fb2f299f5f5be8d2800cd24271f9.woff2?h=f82c468f680071d6d4613192864eed27) format('woff2');
font-weight: 700;
font-style: italic;
font-display: swap;
@@ -252,7 +252,7 @@
@font-face {
font-family: 'Inter';
src: url(/assets/fonts/Inter-501638185f142ea970e06ff6a896cf44.woff2?h=19ed85aa2b2b2d862393d46e9e4754c1) format('woff2');
src: url(/assets/fonts/Inter-501638185f142ea970e06ff6a896cf44.woff2?h=f82c468f680071d6d4613192864eed27) format('woff2');
font-weight: 800;
font-style: italic;
font-display: swap;
@@ -261,7 +261,7 @@
@font-face {
font-family: 'Inter';
src: url(/assets/fonts/Inter-d845be6713e4acd3766e1f8f6418c97e.woff2?h=19ed85aa2b2b2d862393d46e9e4754c1) format('woff2');
src: url(/assets/fonts/Inter-d845be6713e4acd3766e1f8f6418c97e.woff2?h=f82c468f680071d6d4613192864eed27) format('woff2');
font-weight: 800;
font-style: italic;
font-display: swap;
@@ -270,7 +270,7 @@
@font-face {
font-family: 'Inter';
src: url(/assets/fonts/Inter-8d07e5f373f5bb3603b3e139f63e3386.woff2?h=19ed85aa2b2b2d862393d46e9e4754c1) format('woff2');
src: url(/assets/fonts/Inter-8d07e5f373f5bb3603b3e139f63e3386.woff2?h=f82c468f680071d6d4613192864eed27) format('woff2');
font-weight: 800;
font-style: italic;
font-display: swap;
@@ -279,7 +279,7 @@
@font-face {
font-family: 'Inter';
src: url(/assets/fonts/Inter-8e1d10adf40d7223fbee98b930853a8a.woff2?h=19ed85aa2b2b2d862393d46e9e4754c1) format('woff2');
src: url(/assets/fonts/Inter-8e1d10adf40d7223fbee98b930853a8a.woff2?h=f82c468f680071d6d4613192864eed27) format('woff2');
font-weight: 800;
font-style: italic;
font-display: swap;
@@ -288,7 +288,7 @@
@font-face {
font-family: 'Inter';
src: url(/assets/fonts/Inter-db78de5246196d0d93187248cbebc6c2.woff2?h=19ed85aa2b2b2d862393d46e9e4754c1) format('woff2');
src: url(/assets/fonts/Inter-db78de5246196d0d93187248cbebc6c2.woff2?h=f82c468f680071d6d4613192864eed27) format('woff2');
font-weight: 800;
font-style: italic;
font-display: swap;
@@ -297,7 +297,7 @@
@font-face {
font-family: 'Inter';
src: url(/assets/fonts/Inter-6b97bb4aa11fb6d8c29b378b87c8ce45.woff2?h=19ed85aa2b2b2d862393d46e9e4754c1) format('woff2');
src: url(/assets/fonts/Inter-6b97bb4aa11fb6d8c29b378b87c8ce45.woff2?h=f82c468f680071d6d4613192864eed27) format('woff2');
font-weight: 800;
font-style: italic;
font-display: swap;
@@ -306,7 +306,7 @@
@font-face {
font-family: 'Inter';
src: url(/assets/fonts/Inter-69c9fb2f299f5f5be8d2800cd24271f9.woff2?h=19ed85aa2b2b2d862393d46e9e4754c1) format('woff2');
src: url(/assets/fonts/Inter-69c9fb2f299f5f5be8d2800cd24271f9.woff2?h=f82c468f680071d6d4613192864eed27) format('woff2');
font-weight: 800;
font-style: italic;
font-display: swap;
@@ -315,7 +315,7 @@
@font-face {
font-family: 'Inter';
src: url(/assets/fonts/Inter-9f11e6095a39b5e188d6a081f05299fb.woff2?h=19ed85aa2b2b2d862393d46e9e4754c1) format('woff2');
src: url(/assets/fonts/Inter-9f11e6095a39b5e188d6a081f05299fb.woff2?h=f82c468f680071d6d4613192864eed27) format('woff2');
font-weight: 300;
font-style: normal;
font-display: swap;
@@ -324,7 +324,7 @@
@font-face {
font-family: 'Inter';
src: url(/assets/fonts/Inter-c0b8741a9d891c8088e6db8ca3a4b5fa.woff2?h=19ed85aa2b2b2d862393d46e9e4754c1) format('woff2');
src: url(/assets/fonts/Inter-c0b8741a9d891c8088e6db8ca3a4b5fa.woff2?h=f82c468f680071d6d4613192864eed27) format('woff2');
font-weight: 300;
font-style: normal;
font-display: swap;
@@ -333,7 +333,7 @@
@font-face {
font-family: 'Inter';
src: url(/assets/fonts/Inter-991ff15c49155ffbda53e3aa14ecb8b6.woff2?h=19ed85aa2b2b2d862393d46e9e4754c1) format('woff2');
src: url(/assets/fonts/Inter-991ff15c49155ffbda53e3aa14ecb8b6.woff2?h=f82c468f680071d6d4613192864eed27) format('woff2');
font-weight: 300;
font-style: normal;
font-display: swap;
@@ -342,7 +342,7 @@
@font-face {
font-family: 'Inter';
src: url(/assets/fonts/Inter-8b0bd5934b903f2631853751aedf28a6.woff2?h=19ed85aa2b2b2d862393d46e9e4754c1) format('woff2');
src: url(/assets/fonts/Inter-8b0bd5934b903f2631853751aedf28a6.woff2?h=f82c468f680071d6d4613192864eed27) format('woff2');
font-weight: 300;
font-style: normal;
font-display: swap;
@@ -351,7 +351,7 @@
@font-face {
font-family: 'Inter';
src: url(/assets/fonts/Inter-aa0964911973a0fbaf081bae32a490f3.woff2?h=19ed85aa2b2b2d862393d46e9e4754c1) format('woff2');
src: url(/assets/fonts/Inter-aa0964911973a0fbaf081bae32a490f3.woff2?h=f82c468f680071d6d4613192864eed27) format('woff2');
font-weight: 300;
font-style: normal;
font-display: swap;
@@ -360,7 +360,7 @@
@font-face {
font-family: 'Inter';
src: url(/assets/fonts/Inter-1b621eda4be3428e50a0ee070c09005b.woff2?h=19ed85aa2b2b2d862393d46e9e4754c1) format('woff2');
src: url(/assets/fonts/Inter-1b621eda4be3428e50a0ee070c09005b.woff2?h=f82c468f680071d6d4613192864eed27) format('woff2');
font-weight: 300;
font-style: normal;
font-display: swap;
@@ -369,7 +369,7 @@
@font-face {
font-family: 'Inter';
src: url(/assets/fonts/Inter-d48b1d4d308900f0591fb3bdcf442fdf.woff2?h=19ed85aa2b2b2d862393d46e9e4754c1) format('woff2');
src: url(/assets/fonts/Inter-d48b1d4d308900f0591fb3bdcf442fdf.woff2?h=f82c468f680071d6d4613192864eed27) format('woff2');
font-weight: 300;
font-style: normal;
font-display: swap;
@@ -378,7 +378,7 @@
@font-face {
font-family: 'Inter';
src: url(/assets/fonts/Inter-9f11e6095a39b5e188d6a081f05299fb.woff2?h=19ed85aa2b2b2d862393d46e9e4754c1) format('woff2');
src: url(/assets/fonts/Inter-9f11e6095a39b5e188d6a081f05299fb.woff2?h=f82c468f680071d6d4613192864eed27) format('woff2');
font-weight: 400;
font-style: normal;
font-display: swap;
@@ -387,7 +387,7 @@
@font-face {
font-family: 'Inter';
src: url(/assets/fonts/Inter-c0b8741a9d891c8088e6db8ca3a4b5fa.woff2?h=19ed85aa2b2b2d862393d46e9e4754c1) format('woff2');
src: url(/assets/fonts/Inter-c0b8741a9d891c8088e6db8ca3a4b5fa.woff2?h=f82c468f680071d6d4613192864eed27) format('woff2');
font-weight: 400;
font-style: normal;
font-display: swap;
@@ -396,7 +396,7 @@
@font-face {
font-family: 'Inter';
src: url(/assets/fonts/Inter-991ff15c49155ffbda53e3aa14ecb8b6.woff2?h=19ed85aa2b2b2d862393d46e9e4754c1) format('woff2');
src: url(/assets/fonts/Inter-991ff15c49155ffbda53e3aa14ecb8b6.woff2?h=f82c468f680071d6d4613192864eed27) format('woff2');
font-weight: 400;
font-style: normal;
font-display: swap;
@@ -405,7 +405,7 @@
@font-face {
font-family: 'Inter';
src: url(/assets/fonts/Inter-8b0bd5934b903f2631853751aedf28a6.woff2?h=19ed85aa2b2b2d862393d46e9e4754c1) format('woff2');
src: url(/assets/fonts/Inter-8b0bd5934b903f2631853751aedf28a6.woff2?h=f82c468f680071d6d4613192864eed27) format('woff2');
font-weight: 400;
font-style: normal;
font-display: swap;
@@ -414,7 +414,7 @@
@font-face {
font-family: 'Inter';
src: url(/assets/fonts/Inter-aa0964911973a0fbaf081bae32a490f3.woff2?h=19ed85aa2b2b2d862393d46e9e4754c1) format('woff2');
src: url(/assets/fonts/Inter-aa0964911973a0fbaf081bae32a490f3.woff2?h=f82c468f680071d6d4613192864eed27) format('woff2');
font-weight: 400;
font-style: normal;
font-display: swap;
@@ -423,7 +423,7 @@
@font-face {
font-family: 'Inter';
src: url(/assets/fonts/Inter-1b621eda4be3428e50a0ee070c09005b.woff2?h=19ed85aa2b2b2d862393d46e9e4754c1) format('woff2');
src: url(/assets/fonts/Inter-1b621eda4be3428e50a0ee070c09005b.woff2?h=f82c468f680071d6d4613192864eed27) format('woff2');
font-weight: 400;
font-style: normal;
font-display: swap;
@@ -432,7 +432,7 @@
@font-face {
font-family: 'Inter';
src: url(/assets/fonts/Inter-d48b1d4d308900f0591fb3bdcf442fdf.woff2?h=19ed85aa2b2b2d862393d46e9e4754c1) format('woff2');
src: url(/assets/fonts/Inter-d48b1d4d308900f0591fb3bdcf442fdf.woff2?h=f82c468f680071d6d4613192864eed27) format('woff2');
font-weight: 400;
font-style: normal;
font-display: swap;
@@ -441,7 +441,7 @@
@font-face {
font-family: 'Inter';
src: url(/assets/fonts/Inter-9f11e6095a39b5e188d6a081f05299fb.woff2?h=19ed85aa2b2b2d862393d46e9e4754c1) format('woff2');
src: url(/assets/fonts/Inter-9f11e6095a39b5e188d6a081f05299fb.woff2?h=f82c468f680071d6d4613192864eed27) format('woff2');
font-weight: 600;
font-style: normal;
font-display: swap;
@@ -450,7 +450,7 @@
@font-face {
font-family: 'Inter';
src: url(/assets/fonts/Inter-c0b8741a9d891c8088e6db8ca3a4b5fa.woff2?h=19ed85aa2b2b2d862393d46e9e4754c1) format('woff2');
src: url(/assets/fonts/Inter-c0b8741a9d891c8088e6db8ca3a4b5fa.woff2?h=f82c468f680071d6d4613192864eed27) format('woff2');
font-weight: 600;
font-style: normal;
font-display: swap;
@@ -459,7 +459,7 @@
@font-face {
font-family: 'Inter';
src: url(/assets/fonts/Inter-991ff15c49155ffbda53e3aa14ecb8b6.woff2?h=19ed85aa2b2b2d862393d46e9e4754c1) format('woff2');
src: url(/assets/fonts/Inter-991ff15c49155ffbda53e3aa14ecb8b6.woff2?h=f82c468f680071d6d4613192864eed27) format('woff2');
font-weight: 600;
font-style: normal;
font-display: swap;
@@ -468,7 +468,7 @@
@font-face {
font-family: 'Inter';
src: url(/assets/fonts/Inter-8b0bd5934b903f2631853751aedf28a6.woff2?h=19ed85aa2b2b2d862393d46e9e4754c1) format('woff2');
src: url(/assets/fonts/Inter-8b0bd5934b903f2631853751aedf28a6.woff2?h=f82c468f680071d6d4613192864eed27) format('woff2');
font-weight: 600;
font-style: normal;
font-display: swap;
@@ -477,7 +477,7 @@
@font-face {
font-family: 'Inter';
src: url(/assets/fonts/Inter-aa0964911973a0fbaf081bae32a490f3.woff2?h=19ed85aa2b2b2d862393d46e9e4754c1) format('woff2');
src: url(/assets/fonts/Inter-aa0964911973a0fbaf081bae32a490f3.woff2?h=f82c468f680071d6d4613192864eed27) format('woff2');
font-weight: 600;
font-style: normal;
font-display: swap;
@@ -486,7 +486,7 @@
@font-face {
font-family: 'Inter';
src: url(/assets/fonts/Inter-1b621eda4be3428e50a0ee070c09005b.woff2?h=19ed85aa2b2b2d862393d46e9e4754c1) format('woff2');
src: url(/assets/fonts/Inter-1b621eda4be3428e50a0ee070c09005b.woff2?h=f82c468f680071d6d4613192864eed27) format('woff2');
font-weight: 600;
font-style: normal;
font-display: swap;
@@ -495,7 +495,7 @@
@font-face {
font-family: 'Inter';
src: url(/assets/fonts/Inter-d48b1d4d308900f0591fb3bdcf442fdf.woff2?h=19ed85aa2b2b2d862393d46e9e4754c1) format('woff2');
src: url(/assets/fonts/Inter-d48b1d4d308900f0591fb3bdcf442fdf.woff2?h=f82c468f680071d6d4613192864eed27) format('woff2');
font-weight: 600;
font-style: normal;
font-display: swap;
@@ -504,7 +504,7 @@
@font-face {
font-family: 'Inter';
src: url(/assets/fonts/Inter-9f11e6095a39b5e188d6a081f05299fb.woff2?h=19ed85aa2b2b2d862393d46e9e4754c1) format('woff2');
src: url(/assets/fonts/Inter-9f11e6095a39b5e188d6a081f05299fb.woff2?h=f82c468f680071d6d4613192864eed27) format('woff2');
font-weight: 700;
font-style: normal;
font-display: swap;
@@ -513,7 +513,7 @@
@font-face {
font-family: 'Inter';
src: url(/assets/fonts/Inter-c0b8741a9d891c8088e6db8ca3a4b5fa.woff2?h=19ed85aa2b2b2d862393d46e9e4754c1) format('woff2');
src: url(/assets/fonts/Inter-c0b8741a9d891c8088e6db8ca3a4b5fa.woff2?h=f82c468f680071d6d4613192864eed27) format('woff2');
font-weight: 700;
font-style: normal;
font-display: swap;
@@ -522,7 +522,7 @@
@font-face {
font-family: 'Inter';
src: url(/assets/fonts/Inter-991ff15c49155ffbda53e3aa14ecb8b6.woff2?h=19ed85aa2b2b2d862393d46e9e4754c1) format('woff2');
src: url(/assets/fonts/Inter-991ff15c49155ffbda53e3aa14ecb8b6.woff2?h=f82c468f680071d6d4613192864eed27) format('woff2');
font-weight: 700;
font-style: normal;
font-display: swap;
@@ -531,7 +531,7 @@
@font-face {
font-family: 'Inter';
src: url(/assets/fonts/Inter-8b0bd5934b903f2631853751aedf28a6.woff2?h=19ed85aa2b2b2d862393d46e9e4754c1) format('woff2');
src: url(/assets/fonts/Inter-8b0bd5934b903f2631853751aedf28a6.woff2?h=f82c468f680071d6d4613192864eed27) format('woff2');
font-weight: 700;
font-style: normal;
font-display: swap;
@@ -540,7 +540,7 @@
@font-face {
font-family: 'Inter';
src: url(/assets/fonts/Inter-aa0964911973a0fbaf081bae32a490f3.woff2?h=19ed85aa2b2b2d862393d46e9e4754c1) format('woff2');
src: url(/assets/fonts/Inter-aa0964911973a0fbaf081bae32a490f3.woff2?h=f82c468f680071d6d4613192864eed27) format('woff2');
font-weight: 700;
font-style: normal;
font-display: swap;
@@ -549,7 +549,7 @@
@font-face {
font-family: 'Inter';
src: url(/assets/fonts/Inter-1b621eda4be3428e50a0ee070c09005b.woff2?h=19ed85aa2b2b2d862393d46e9e4754c1) format('woff2');
src: url(/assets/fonts/Inter-1b621eda4be3428e50a0ee070c09005b.woff2?h=f82c468f680071d6d4613192864eed27) format('woff2');
font-weight: 700;
font-style: normal;
font-display: swap;
@@ -558,7 +558,7 @@
@font-face {
font-family: 'Inter';
src: url(/assets/fonts/Inter-d48b1d4d308900f0591fb3bdcf442fdf.woff2?h=19ed85aa2b2b2d862393d46e9e4754c1) format('woff2');
src: url(/assets/fonts/Inter-d48b1d4d308900f0591fb3bdcf442fdf.woff2?h=f82c468f680071d6d4613192864eed27) format('woff2');
font-weight: 700;
font-style: normal;
font-display: swap;
@@ -567,7 +567,7 @@
@font-face {
font-family: 'Inter';
src: url(/assets/fonts/Inter-9f11e6095a39b5e188d6a081f05299fb.woff2?h=19ed85aa2b2b2d862393d46e9e4754c1) format('woff2');
src: url(/assets/fonts/Inter-9f11e6095a39b5e188d6a081f05299fb.woff2?h=f82c468f680071d6d4613192864eed27) format('woff2');
font-weight: 800;
font-style: normal;
font-display: swap;
@@ -576,7 +576,7 @@
@font-face {
font-family: 'Inter';
src: url(/assets/fonts/Inter-c0b8741a9d891c8088e6db8ca3a4b5fa.woff2?h=19ed85aa2b2b2d862393d46e9e4754c1) format('woff2');
src: url(/assets/fonts/Inter-c0b8741a9d891c8088e6db8ca3a4b5fa.woff2?h=f82c468f680071d6d4613192864eed27) format('woff2');
font-weight: 800;
font-style: normal;
font-display: swap;
@@ -585,7 +585,7 @@
@font-face {
font-family: 'Inter';
src: url(/assets/fonts/Inter-991ff15c49155ffbda53e3aa14ecb8b6.woff2?h=19ed85aa2b2b2d862393d46e9e4754c1) format('woff2');
src: url(/assets/fonts/Inter-991ff15c49155ffbda53e3aa14ecb8b6.woff2?h=f82c468f680071d6d4613192864eed27) format('woff2');
font-weight: 800;
font-style: normal;
font-display: swap;
@@ -594,7 +594,7 @@
@font-face {
font-family: 'Inter';
src: url(/assets/fonts/Inter-8b0bd5934b903f2631853751aedf28a6.woff2?h=19ed85aa2b2b2d862393d46e9e4754c1) format('woff2');
src: url(/assets/fonts/Inter-8b0bd5934b903f2631853751aedf28a6.woff2?h=f82c468f680071d6d4613192864eed27) format('woff2');
font-weight: 800;
font-style: normal;
font-display: swap;
@@ -603,7 +603,7 @@
@font-face {
font-family: 'Inter';
src: url(/assets/fonts/Inter-aa0964911973a0fbaf081bae32a490f3.woff2?h=19ed85aa2b2b2d862393d46e9e4754c1) format('woff2');
src: url(/assets/fonts/Inter-aa0964911973a0fbaf081bae32a490f3.woff2?h=f82c468f680071d6d4613192864eed27) format('woff2');
font-weight: 800;
font-style: normal;
font-display: swap;
@@ -612,7 +612,7 @@
@font-face {
font-family: 'Inter';
src: url(/assets/fonts/Inter-1b621eda4be3428e50a0ee070c09005b.woff2?h=19ed85aa2b2b2d862393d46e9e4754c1) format('woff2');
src: url(/assets/fonts/Inter-1b621eda4be3428e50a0ee070c09005b.woff2?h=f82c468f680071d6d4613192864eed27) format('woff2');
font-weight: 800;
font-style: normal;
font-display: swap;
@@ -621,7 +621,7 @@
@font-face {
font-family: 'Inter';
src: url(/assets/fonts/Inter-d48b1d4d308900f0591fb3bdcf442fdf.woff2?h=19ed85aa2b2b2d862393d46e9e4754c1) format('woff2');
src: url(/assets/fonts/Inter-d48b1d4d308900f0591fb3bdcf442fdf.woff2?h=f82c468f680071d6d4613192864eed27) format('woff2');
font-weight: 800;
font-style: normal;
font-display: swap;

20
Export/assets/css/Open Sans.css
View File

@@ -1,6 +1,6 @@
@font-face {
font-family: 'Open Sans';
src: url(/assets/fonts/Open%20Sans-95e85857855fec865b6c71369458c398.woff2?h=20a4cf6023d41bd3d4b0306d0fa982e1) format('woff2');
src: url(/assets/fonts/Open%20Sans-95e85857855fec865b6c71369458c398.woff2?h=1ccda879ca801f3b499d443e49e076fe) format('woff2');
font-weight: 400;
font-style: normal;
font-display: swap;
@@ -9,7 +9,7 @@
@font-face {
font-family: 'Open Sans';
src: url(/assets/fonts/Open%20Sans-aaa666d4a428e7251998747fecc78290.woff2?h=20a4cf6023d41bd3d4b0306d0fa982e1) format('woff2');
src: url(/assets/fonts/Open%20Sans-aaa666d4a428e7251998747fecc78290.woff2?h=1ccda879ca801f3b499d443e49e076fe) format('woff2');
font-weight: 400;
font-style: normal;
font-display: swap;
@@ -18,7 +18,7 @@
@font-face {
font-family: 'Open Sans';
src: url(/assets/fonts/Open%20Sans-78b0a85baaa30f24beb648328eafa7d2.woff2?h=20a4cf6023d41bd3d4b0306d0fa982e1) format('woff2');
src: url(/assets/fonts/Open%20Sans-78b0a85baaa30f24beb648328eafa7d2.woff2?h=1ccda879ca801f3b499d443e49e076fe) format('woff2');
font-weight: 400;
font-style: normal;
font-display: swap;
@@ -27,7 +27,7 @@
@font-face {
font-family: 'Open Sans';
src: url(/assets/fonts/Open%20Sans-61d49d1448f17f5c304c64dcd7e21de6.woff2?h=20a4cf6023d41bd3d4b0306d0fa982e1) format('woff2');
src: url(/assets/fonts/Open%20Sans-61d49d1448f17f5c304c64dcd7e21de6.woff2?h=1ccda879ca801f3b499d443e49e076fe) format('woff2');
font-weight: 400;
font-style: normal;
font-display: swap;
@@ -36,7 +36,7 @@
@font-face {
font-family: 'Open Sans';
src: url(/assets/fonts/Open%20Sans-b97d58e7110272ce3bd9c10ea779a9f2.woff2?h=20a4cf6023d41bd3d4b0306d0fa982e1) format('woff2');
src: url(/assets/fonts/Open%20Sans-b97d58e7110272ce3bd9c10ea779a9f2.woff2?h=1ccda879ca801f3b499d443e49e076fe) format('woff2');
font-weight: 400;
font-style: normal;
font-display: swap;
@@ -45,7 +45,7 @@
@font-face {
font-family: 'Open Sans';
src: url(/assets/fonts/Open%20Sans-75740ec0c715f6b2a4a5d6d5224b0913.woff2?h=20a4cf6023d41bd3d4b0306d0fa982e1) format('woff2');
src: url(/assets/fonts/Open%20Sans-75740ec0c715f6b2a4a5d6d5224b0913.woff2?h=1ccda879ca801f3b499d443e49e076fe) format('woff2');
font-weight: 400;
font-style: normal;
font-display: swap;
@@ -54,7 +54,7 @@
@font-face {
font-family: 'Open Sans';
src: url(/assets/fonts/Open%20Sans-a6b0039aa2236f69d4b63042a8f3769a.woff2?h=20a4cf6023d41bd3d4b0306d0fa982e1) format('woff2');
src: url(/assets/fonts/Open%20Sans-a6b0039aa2236f69d4b63042a8f3769a.woff2?h=1ccda879ca801f3b499d443e49e076fe) format('woff2');
font-weight: 400;
font-style: normal;
font-display: swap;
@@ -63,7 +63,7 @@
@font-face {
font-family: 'Open Sans';
src: url(/assets/fonts/Open%20Sans-8c179a95e52d0e855e33be00ed141e46.woff2?h=20a4cf6023d41bd3d4b0306d0fa982e1) format('woff2');
src: url(/assets/fonts/Open%20Sans-8c179a95e52d0e855e33be00ed141e46.woff2?h=1ccda879ca801f3b499d443e49e076fe) format('woff2');
font-weight: 400;
font-style: normal;
font-display: swap;
@@ -72,7 +72,7 @@
@font-face {
font-family: 'Open Sans';
src: url(/assets/fonts/Open%20Sans-f020d8a91fea76d306428e8877dcc7d6.woff2?h=20a4cf6023d41bd3d4b0306d0fa982e1) format('woff2');
src: url(/assets/fonts/Open%20Sans-f020d8a91fea76d306428e8877dcc7d6.woff2?h=1ccda879ca801f3b499d443e49e076fe) format('woff2');
font-weight: 400;
font-style: normal;
font-display: swap;
@@ -81,7 +81,7 @@
@font-face {
font-family: 'Open Sans';
src: url(/assets/fonts/Open%20Sans-34eb5b5918b88fb910da76a70e512615.woff2?h=20a4cf6023d41bd3d4b0306d0fa982e1) format('woff2');
src: url(/assets/fonts/Open%20Sans-34eb5b5918b88fb910da76a70e512615.woff2?h=1ccda879ca801f3b499d443e49e076fe) format('woff2');
font-weight: 400;
font-style: normal;
font-display: swap;

10
Export/assets/css/Slider-Range.css
View File

@@ -17,3 +17,13 @@
opacity: 1;
}
.customiserButtons {
background-color: var(--bs-btn-active-bg) !important;
border-color: var(--bs-btn-active-border-color) !important;
}
.customiserButtons:hover {
background-color: #198754 !important;
border-color: #198754 !important;
}

8
Export/assets/css/styles.css
View File

@@ -399,7 +399,7 @@ a {
.dropdown-item.active, .dropdown-item:active {
color: #19f5aa!important;
text-decoration: none;
background-color: var(--bs-dropdown-link-active-bg);
background-color: rgb(45, 44, 56);
}
.dropdown-item:hover, .dropdown-item:focus {
@@ -420,3 +420,9 @@ a {
height: 150px;
}
.hexadecimalButtons {
margin: 0.5em auto 0.5em auto;
display: flex;
height: 38px;
}

1
Export/assets/css/styles.min.css vendored
View File

File diff suppressed because one or more lines are too long

BIN
Export/assets/img/Educational_Impact.webp Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 425 KiB

BIN
Export/assets/img/Evolution_BitBox_to_CSBox.webp Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 191 KiB

568
Export/assets/js/binary.js
View File

@@ -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);
}

403
Export/assets/js/hexColours.js
View File

@@ -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());
}

214
Export/assets/js/hexadecimal.js
View File

@@ -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();
});
}

159
Export/assets/js/logicGates.js
View File

@@ -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
View File

File diff suppressed because one or more lines are too long