You've already forked computing-box
Alexander Davis
93b5f11abe
# Wave 1 Beta Release --- ## Key Features and Enhancements ### 1. Core Functionality - Developed and optimized JavaScript functions for binary, hexadecimal, and logic gate simulations, ensuring high performance and compatibility across GCSE and A-Level specifications. - Introduced dynamic behavior to adapt pages (e.g., GCSE vs A-Level) based on URL or heading context. - Streamlined reset, toggle, and update functionalities for user inputs and sliders across various simulation pages. ### 2. Hexadecimal Simulator - Enabled two configurations: - 8-bit binary with 2-digit hexadecimal (GCSE). - 16-bit binary with 4-digit hexadecimal (A-Level). - Ensured user input validation for denary and hexadecimal values with robust error handling and feedback. ### 3. Hex Colors Module - Added dynamic color preview updates for RGB sliders, denary, binary, and hexadecimal values. - Included an "invert color" feature with corresponding visual updates. ### 4. Logic Gates Module - Implemented NOT, AND, and OR gates with toggle buttons and live output updates. - Enhanced reset functionality to initialize states correctly for each gate type. ### 5. Error Handling - Resolved bugs related to undefined slider properties and invalid binary/hexadecimal inputs. - Implemented fallback defaults for invalid or canceled inputs. --- ## Visual Enhancements ### 1. Custom Illustrations - Created custom images for the following sections: - **About CS:Box**: A simplistic and educational-themed design. - **The Evolution from Bit:Box**: A visual transition from Bit:Box to CS:Box. - **Educational Impact**: Vibrant and engaging designs showcasing classroom learning. - Refined visual hierarchy across all pages for better user experience. ### 2. Navigation Revamp - Redesigned Bootstrap-based dropdown menus for better usability and accessibility. - Improved menu hierarchy to align with the UK Computing Curriculum elements. --- ## Documentation ### 1. CS:Box Overview - Added content explaining the project's evolution from Bit:Box and its educational significance. - Highlighted key features and their relevance to the UK Computing Curriculum. ### 2. GitHub Repository - Structured repository with concise descriptions of modules, features, and usage instructions. --- ## Bug Fixes and Optimizations - Addressed issues with sliders not functioning correctly after reset on hexadecimal pages. - Fixed error with NOT gate toggling state incorrectly upon reset. - Streamlined JavaScript logic across all simulations to reduce redundancy and improve maintainability. --- ## Future Scope - Prepare for **Wave 2 Release** with additional simulations (e.g., XOR gates, floating-point representations). - Enhance accessibility features for a more inclusive user experience. - Explore collaborative features for classroom settings. --- *Wave 1 Beta Release is the foundation of CS:Box, setting the stage for engaging, curriculum-aligned computing education tools.*
324 lines
28 KiB
HTML
324 lines
28 KiB
HTML
<!DOCTYPE html>
|
|
<html data-bs-theme="auto" lang="en">
|
|
|
|
<head>
|
|
<meta charset="utf-8">
|
|
<!-- Matomo -->
|
|
<script>
|
|
var _paq = window._paq = window._paq || [];
|
|
/* tracker methods like "setCustomDimension" should be called before "trackPageView" */
|
|
_paq.push(['trackPageView']);
|
|
_paq.push(['enableLinkTracking']);
|
|
(function() {
|
|
var u="//analytics.adcmnetworks.co.uk/";
|
|
_paq.push(['setTrackerUrl', u+'matomo.php']);
|
|
_paq.push(['setSiteId', '1']);
|
|
var d=document, g=d.createElement('script'), s=d.getElementsByTagName('script')[0];
|
|
g.async=true; g.src=u+'matomo.js'; s.parentNode.insertBefore(g,s);
|
|
})();
|
|
</script>
|
|
<!-- End Matomo Code -->
|
|
|
|
<!-- Matomo Image Tracker-->
|
|
<img referrerpolicy="no-referrer-when-downgrade" src="https://analytics.adcmnetworks.co.uk/matomo.php?idsite=1&rec=1" style="border:0" alt="" />
|
|
<!-- End Matomo -->
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0, shrink-to-fit=no">
|
|
<title>About - CS:Box</title>
|
|
<meta name="twitter:card" content="summary_large_image">
|
|
<meta property="og:type" content="website">
|
|
<meta property="og:image" content="https://csbox.mrdaviscsit.uk/assets/img/CSBoxLogo.svg">
|
|
<script>
|
|
(function() {
|
|
|
|
// JavaScript snippet handling Dark/Light mode switching
|
|
|
|
const getStoredTheme = () => localStorage.getItem('theme');
|
|
const setStoredTheme = theme => localStorage.setItem('theme', theme);
|
|
const forcedTheme = document.documentElement.getAttribute('data-bss-forced-theme');
|
|
|
|
const getPreferredTheme = () => {
|
|
|
|
if (forcedTheme) return forcedTheme;
|
|
|
|
const storedTheme = getStoredTheme();
|
|
if (storedTheme) {
|
|
return storedTheme;
|
|
}
|
|
|
|
const pageTheme = document.documentElement.getAttribute('data-bs-theme');
|
|
|
|
if (pageTheme) {
|
|
return pageTheme;
|
|
}
|
|
|
|
return window.matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : 'light';
|
|
}
|
|
|
|
const setTheme = theme => {
|
|
if (theme === 'auto' && window.matchMedia('(prefers-color-scheme: dark)').matches) {
|
|
document.documentElement.setAttribute('data-bs-theme', 'dark');
|
|
} else {
|
|
document.documentElement.setAttribute('data-bs-theme', theme);
|
|
}
|
|
}
|
|
|
|
setTheme(getPreferredTheme());
|
|
|
|
const showActiveTheme = (theme, focus = false) => {
|
|
const themeSwitchers = [].slice.call(document.querySelectorAll('.theme-switcher'));
|
|
|
|
if (!themeSwitchers.length) return;
|
|
|
|
document.querySelectorAll('[data-bs-theme-value]').forEach(element => {
|
|
element.classList.remove('active');
|
|
element.setAttribute('aria-pressed', 'false');
|
|
});
|
|
|
|
for (const themeSwitcher of themeSwitchers) {
|
|
|
|
const btnToActivate = themeSwitcher.querySelector('[data-bs-theme-value="' + theme + '"]');
|
|
|
|
if (btnToActivate) {
|
|
btnToActivate.classList.add('active');
|
|
btnToActivate.setAttribute('aria-pressed', 'true');
|
|
}
|
|
}
|
|
}
|
|
|
|
window.matchMedia('(prefers-color-scheme: dark)').addEventListener('change', () => {
|
|
const storedTheme = getStoredTheme();
|
|
if (storedTheme !== 'light' && storedTheme !== 'dark') {
|
|
setTheme(getPreferredTheme());
|
|
}
|
|
});
|
|
|
|
window.addEventListener('DOMContentLoaded', () => {
|
|
showActiveTheme(getPreferredTheme());
|
|
|
|
document.querySelectorAll('[data-bs-theme-value]')
|
|
.forEach(toggle => {
|
|
toggle.addEventListener('click', (e) => {
|
|
e.preventDefault();
|
|
const theme = toggle.getAttribute('data-bs-theme-value');
|
|
setStoredTheme(theme);
|
|
setTheme(theme);
|
|
showActiveTheme(theme);
|
|
})
|
|
})
|
|
});
|
|
})();
|
|
</script>
|
|
<link rel="icon" type="image/svg+xml" sizes="500x500" href="/assets/img/CSBoxLogo.svg?h=ca838acaf7f1bc97e10657f07ed63d71">
|
|
<link rel="icon" type="image/svg+xml" sizes="500x500" href="/assets/img/CSBoxLogo.svg?h=ca838acaf7f1bc97e10657f07ed63d71" media="(prefers-color-scheme: dark)">
|
|
<link rel="icon" type="image/svg+xml" sizes="500x500" href="/assets/img/CSBoxLogo.svg?h=ca838acaf7f1bc97e10657f07ed63d71">
|
|
<link rel="icon" type="image/svg+xml" sizes="500x500" href="/assets/img/CSBoxLogo.svg?h=ca838acaf7f1bc97e10657f07ed63d71" media="(prefers-color-scheme: dark)">
|
|
<link rel="icon" type="image/svg+xml" sizes="500x500" href="/assets/img/CSBoxLogo.svg?h=ca838acaf7f1bc97e10657f07ed63d71">
|
|
<link rel="icon" type="image/svg+xml" sizes="500x500" href="/assets/img/CSBoxLogo.svg?h=ca838acaf7f1bc97e10657f07ed63d71">
|
|
<link rel="stylesheet" href="/assets/bootstrap/css/bootstrap.min.css?h=1bd2fff2799ca0c747d7b2f342f09263">
|
|
<link rel="stylesheet" href="/assets/css/DSEG7%20Classic%20Regular.css">
|
|
<link rel="stylesheet" href="/assets/css/IEC%20symbols%20Unicode.css?h=f58bcc159dfcde3a8902f3c3e5961248">
|
|
<link rel="stylesheet" href="/assets/css/Inter.css?h=f82c468f680071d6d4613192864eed27">
|
|
<link rel="stylesheet" href="/assets/css/Open%20Sans.css?h=1ccda879ca801f3b499d443e49e076fe">
|
|
<link rel="stylesheet" href="/assets/css/Seven%20Segment.css?h=f58bcc159dfcde3a8902f3c3e5961248">
|
|
<link rel="stylesheet" href="/assets/css/bs-theme-overrides.css?h=c211b632aade4ff7985e7a32a316c7b8">
|
|
<link rel="stylesheet" href="/assets/css/Slider-Range.css?h=f8e9df474f99934e8bddde82bea5ff22">
|
|
<link rel="stylesheet" href="/assets/css/styles.css?h=28387c3818424c71dd9241afe0feaaf9">
|
|
</head>
|
|
|
|
<body>
|
|
<header class="bg-dark">
|
|
<!-- Start: Site Navigation -->
|
|
<nav class="navbar navbar-expand-md sticky-top py-3 navbar-dark" id="mainNav" style="background: rgb(45, 44, 56);">
|
|
<div class="container"><img src="/assets/img/CSBoxLogo.svg?h=ca838acaf7f1bc97e10657f07ed63d71" style="width: 32px;margin: 5px;"><a class="navbar-brand d-flex align-items-center" href="/"><span>CS:Box</span></a><button data-bs-toggle="collapse" class="navbar-toggler" data-bs-target="#navcol-5"><span class="visually-hidden">Toggle navigation</span><span class="navbar-toggler-icon"></span></button>
|
|
<div class="collapse navbar-collapse" id="navcol-5">
|
|
<ul class="navbar-nav ms-auto">
|
|
<li class="nav-item"><a class="nav-link" href="/">Home</a></li>
|
|
<li class="nav-item"><a class="nav-link active" href="about">About</a></li>
|
|
<li class="nav-item dropdown"><a class="dropdown-toggle nav-link" aria-expanded="false" data-bs-toggle="dropdown" data-bs-auto-close="false" href="#">Binary</a>
|
|
<div class="dropdown-menu"><a class="dropdown-item" href="unsigned-binary">Unsigned Integers</a><a class="dropdown-item" href="twos-compliment-binary">Two's Compliment</a></div>
|
|
</li>
|
|
<li class="nav-item dropdown"><a class="dropdown-toggle nav-link" aria-expanded="false" data-bs-toggle="dropdown" data-bs-auto-close="false" href="#">Hexadecimal</a>
|
|
<div class="dropdown-menu"><a class="dropdown-item" href="gcse-hexadecimal">GCSE</a><a class="dropdown-item" href="a-level-hexadecimal">A Level</a></div>
|
|
</li>
|
|
<li class="nav-item"><a class="nav-link" href="hex-colours">Hex Colours</a></li>
|
|
<li class="nav-item dropdown"><a class="dropdown-toggle nav-link" aria-expanded="false" data-bs-toggle="dropdown" data-bs-auto-close="false" href="#">Logic Gates</a>
|
|
<div class="dropdown-menu"><a class="dropdown-item" href="not-gate">NOT</a><a class="dropdown-item" href="and-gate">AND</a><a class="dropdown-item" href="or-gate">OR</a></div>
|
|
</li>
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
</nav><!-- End: Site Navigation -->
|
|
</header>
|
|
<section class="py-5">
|
|
<!-- Start: Features Cards -->
|
|
<div class="container">
|
|
<div class="row mb-4 mb-lg-5">
|
|
<div class="col-md-8 col-xl-6 text-center mx-auto">
|
|
<p class="fw-bold text-success mb-2">CS:Box</p>
|
|
<h3 class="fw-bold">An evolution of Bit:Box to incorporate different elements of the UK Computing Curriculum</h3>
|
|
</div>
|
|
</div>
|
|
<div class="row row-cols-1 row-cols-md-2 mx-auto">
|
|
<div class="col mb-5"><img class="rounded img-fluid shadow" src="/assets/img/CSBoxLogo.svg?h=ca838acaf7f1bc97e10657f07ed63d71"></div>
|
|
<div class="col d-md-flex align-items-md-end align-items-lg-center mb-5">
|
|
<div>
|
|
<h5 class="fw-bold">About CS:Box</h5>
|
|
<p class="text-muted mb-4">CS:Box is an innovative educational tool designed to support the teaching of key concepts from the UK Computing Curriculum. Building on the foundations of Bit:Box, CS:Box expands its scope to cover a wider range of essential computing topics, providing an interactive and engaging experience for students.</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="row row-cols-1 row-cols-md-2 mx-auto">
|
|
<div class="col order-md-last mb-5"><img class="rounded img-fluid shadow" src="/assets/img/BitBoxLogo.png?h=a50b3ddb5614299b0c00dd4f01bc402e"></div>
|
|
<div class="col d-md-flex align-items-md-end align-items-lg-center mb-5">
|
|
<div>
|
|
<h5 class="fw-bold">The Evolution from Bit:Box</h5>
|
|
<p class="text-muted mb-4">Originally, Bit:Box was developed as a web-based version of a physical Binary Light Box, a hands-on device created by Mr. Davis. This device used lightbulbs and an Arduino microcontroller to visually demonstrate how binary numbers work and the values assigned to each binary column. By interacting with the light switches, students could better understand the concepts of binary counting, place values, and logic.</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="row row-cols-1 row-cols-md-2 mx-auto">
|
|
<div class="col mb-5"><img class="rounded img-fluid shadow" src="/assets/img/Evolution_BitBox_to_CSBox.webp?h=1ec7437634c178a31d213253a1700f67"></div>
|
|
<div class="col d-md-flex align-items-md-end align-items-lg-center mb-5">
|
|
<div>
|
|
<h5 class="fw-bold">How CS:Box Builds on Bit:Box</h5>
|
|
<p class="text-muted mb-4">CS:Box retains the interactive, visual, and tactile learning approach introduced by Bit:Box but extends its reach to cover a broader range of computing concepts. By incorporating elements of the UK Computing Curriculum, CS:Box now goes beyond binary to include concepts like hexadecimal, logic gates, and even color representation in computing. It allows students to visualize and manipulate abstract computing concepts in a practical, hands-on way.</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div><!-- End: Features Cards -->
|
|
<!-- Start: Service Cards -->
|
|
<section>
|
|
<!-- Start: Features Cards -->
|
|
<div class="container bg-dark py-5">
|
|
<div class="row">
|
|
<div class="col-md-8 col-xl-6 text-center mx-auto">
|
|
<h3 class="fw-bold">Key Features of CS:Box</h3>
|
|
</div>
|
|
</div>
|
|
<div class="py-5 p-lg-5">
|
|
<div class="row row-cols-1 row-cols-md-2 mx-auto" style="max-width: 900px;">
|
|
<div class="col mb-5">
|
|
<div class="card shadow-sm">
|
|
<div class="card-body px-4 py-5 px-md-5">
|
|
<div class="bs-icon-lg d-flex justify-content-center align-items-center mb-3 bs-icon" style="top: 1rem;right: 1rem;position: absolute;"><svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" fill="currentColor" viewBox="0 0 16 16" class="bi bi-diagram-3 text-success">
|
|
<path fill-rule="evenodd" d="M6 3.5A1.5 1.5 0 0 1 7.5 2h1A1.5 1.5 0 0 1 10 3.5v1A1.5 1.5 0 0 1 8.5 6v1H14a.5.5 0 0 1 .5.5v1a.5.5 0 0 1-1 0V8h-5v.5a.5.5 0 0 1-1 0V8h-5v.5a.5.5 0 0 1-1 0v-1A.5.5 0 0 1 2 7h5.5V6A1.5 1.5 0 0 1 6 4.5zM8.5 5a.5.5 0 0 0 .5-.5v-1a.5.5 0 0 0-.5-.5h-1a.5.5 0 0 0-.5.5v1a.5.5 0 0 0 .5.5zM0 11.5A1.5 1.5 0 0 1 1.5 10h1A1.5 1.5 0 0 1 4 11.5v1A1.5 1.5 0 0 1 2.5 14h-1A1.5 1.5 0 0 1 0 12.5zm1.5-.5a.5.5 0 0 0-.5.5v1a.5.5 0 0 0 .5.5h1a.5.5 0 0 0 .5-.5v-1a.5.5 0 0 0-.5-.5zm4.5.5A1.5 1.5 0 0 1 7.5 10h1a1.5 1.5 0 0 1 1.5 1.5v1A1.5 1.5 0 0 1 8.5 14h-1A1.5 1.5 0 0 1 6 12.5zm1.5-.5a.5.5 0 0 0-.5.5v1a.5.5 0 0 0 .5.5h1a.5.5 0 0 0 .5-.5v-1a.5.5 0 0 0-.5-.5zm4.5.5a1.5 1.5 0 0 1 1.5-1.5h1a1.5 1.5 0 0 1 1.5 1.5v1a1.5 1.5 0 0 1-1.5 1.5h-1a1.5 1.5 0 0 1-1.5-1.5zm1.5-.5a.5.5 0 0 0-.5.5v1a.5.5 0 0 0 .5.5h1a.5.5 0 0 0 .5-.5v-1a.5.5 0 0 0-.5-.5z"></path>
|
|
</svg></div>
|
|
<h5 class="fw-bold card-title">Binary Simulations</h5>
|
|
<p class="text-muted card-text mb-4">Erat netus est hendrerit, nullam et quis ad cras porttitor iaculis. Bibendum vulputate cras aenean.</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="col mb-5">
|
|
<div class="card shadow-sm">
|
|
<div class="card-body px-4 py-5 px-md-5">
|
|
<div class="bs-icon-lg d-flex justify-content-center align-items-center mb-3 bs-icon" style="top: 1rem;right: 1rem;position: absolute;"><svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" fill="currentColor" viewBox="0 0 16 16" class="bi bi-hash text-success">
|
|
<path d="M8.39 12.648a1.32 1.32 0 0 0-.015.18c0 .305.21.508.5.508.266 0 .492-.172.555-.477l.554-2.703h1.204c.421 0 .617-.234.617-.547 0-.312-.188-.53-.617-.53h-.985l.516-2.524h1.265c.43 0 .618-.227.618-.547 0-.313-.188-.524-.618-.524h-1.046l.476-2.304a1.06 1.06 0 0 0 .016-.164.51.51 0 0 0-.516-.516.54.54 0 0 0-.539.43l-.523 2.554H7.617l.477-2.304c.008-.04.015-.118.015-.164a.512.512 0 0 0-.523-.516.539.539 0 0 0-.531.43L6.53 5.484H5.414c-.43 0-.617.22-.617.532 0 .312.187.539.617.539h.906l-.515 2.523H4.609c-.421 0-.609.219-.609.531 0 .313.188.547.61.547h.976l-.516 2.492c-.008.04-.015.125-.015.18 0 .305.21.508.5.508.265 0 .492-.172.554-.477l.555-2.703h2.242l-.515 2.492zm-1-6.109h2.266l-.515 2.563H6.859l.532-2.563z"></path>
|
|
</svg></div>
|
|
<h5 class="fw-bold card-title">Hexadecimal Tools</h5>
|
|
<p class="text-muted card-text mb-4">Erat netus est hendrerit, nullam et quis ad cras porttitor iaculis. Bibendum vulputate cras aenean.</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="col mb-4">
|
|
<div class="card shadow-sm">
|
|
<div class="card-body px-4 py-5 px-md-5">
|
|
<div class="bs-icon-lg d-flex justify-content-center align-items-center mb-3 bs-icon" style="top: 1rem;right: 1rem;position: absolute;"><svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" fill="currentColor" viewBox="0 0 16 16" class="bi bi-toggle2-on text-success">
|
|
<path d="M7 5H3a3 3 0 0 0 0 6h4a4.995 4.995 0 0 1-.584-1H3a2 2 0 1 1 0-4h3.416c.156-.357.352-.692.584-1"></path>
|
|
<path d="M16 8A5 5 0 1 1 6 8a5 5 0 0 1 10 0"></path>
|
|
</svg></div>
|
|
<h5 class="fw-bold card-title">Logic Gates</h5>
|
|
<p class="text-muted card-text mb-4">Erat netus est hendrerit, nullam et quis ad cras porttitor iaculis. Bibendum vulputate cras aenean.</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="col mb-4">
|
|
<div class="card shadow-sm">
|
|
<div class="card-body px-4 py-5 px-md-5">
|
|
<div class="bs-icon-lg d-flex justify-content-center align-items-center mb-3 bs-icon" style="top: 1rem;right: 1rem;position: absolute;"><svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" fill="currentColor" viewBox="0 0 16 16" class="bi bi-palette text-success">
|
|
<path d="M8 5a1.5 1.5 0 1 0 0-3 1.5 1.5 0 0 0 0 3m4 3a1.5 1.5 0 1 0 0-3 1.5 1.5 0 0 0 0 3M5.5 7a1.5 1.5 0 1 1-3 0 1.5 1.5 0 0 1 3 0m.5 6a1.5 1.5 0 1 0 0-3 1.5 1.5 0 0 0 0 3"></path>
|
|
<path d="M16 8c0 3.15-1.866 2.585-3.567 2.07C11.42 9.763 10.465 9.473 10 10c-.603.683-.475 1.819-.351 2.92C9.826 14.495 9.996 16 8 16a8 8 0 1 1 8-8m-8 7c.611 0 .654-.171.655-.176.078-.146.124-.464.07-1.119-.014-.168-.037-.37-.061-.591-.052-.464-.112-1.005-.118-1.462-.01-.707.083-1.61.704-2.314.369-.417.845-.578 1.272-.618.404-.038.812.026 1.16.104.343.077.702.186 1.025.284l.028.008c.346.105.658.199.953.266.653.148.904.083.991.024C14.717 9.38 15 9.161 15 8a7 7 0 1 0-7 7"></path>
|
|
</svg></div>
|
|
<h5 class="fw-bold card-title">Hex Colors</h5>
|
|
<p class="text-muted card-text mb-4">Erat netus est hendrerit, nullam et quis ad cras porttitor iaculis. Bibendum vulputate cras aenean.</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="col-md-8 col-xl-6 text-center mx-auto">
|
|
<div class="card shadow-sm">
|
|
<div class="card-body px-4 py-5 px-md-5">
|
|
<div class="bs-icon-lg d-flex justify-content-center align-items-center mb-3 bs-icon" style="top: 1rem;right: 1rem;position: absolute;"><svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" fill="currentColor" viewBox="0 0 16 16" class="bi bi-globe text-success">
|
|
<path d="M0 8a8 8 0 1 1 16 0A8 8 0 0 1 0 8m7.5-6.923c-.67.204-1.335.82-1.887 1.855A7.97 7.97 0 0 0 5.145 4H7.5zM4.09 4a9.267 9.267 0 0 1 .64-1.539 6.7 6.7 0 0 1 .597-.933A7.025 7.025 0 0 0 2.255 4zm-.582 3.5c.03-.877.138-1.718.312-2.5H1.674a6.958 6.958 0 0 0-.656 2.5zM4.847 5a12.5 12.5 0 0 0-.338 2.5H7.5V5zM8.5 5v2.5h2.99a12.495 12.495 0 0 0-.337-2.5zM4.51 8.5a12.5 12.5 0 0 0 .337 2.5H7.5V8.5zm3.99 0V11h2.653c.187-.765.306-1.608.338-2.5zM5.145 12c.138.386.295.744.468 1.068.552 1.035 1.218 1.65 1.887 1.855V12zm.182 2.472a6.696 6.696 0 0 1-.597-.933A9.268 9.268 0 0 1 4.09 12H2.255a7.024 7.024 0 0 0 3.072 2.472M3.82 11a13.652 13.652 0 0 1-.312-2.5h-2.49c.062.89.291 1.733.656 2.5zm6.853 3.472A7.024 7.024 0 0 0 13.745 12H11.91a9.27 9.27 0 0 1-.64 1.539 6.688 6.688 0 0 1-.597.933M8.5 12v2.923c.67-.204 1.335-.82 1.887-1.855.173-.324.33-.682.468-1.068zm3.68-1h2.146c.365-.767.594-1.61.656-2.5h-2.49a13.65 13.65 0 0 1-.312 2.5zm2.802-3.5a6.959 6.959 0 0 0-.656-2.5H12.18c.174.782.282 1.623.312 2.5zM11.27 2.461c.247.464.462.98.64 1.539h1.835a7.024 7.024 0 0 0-3.072-2.472c.218.284.418.598.597.933zM10.855 4a7.966 7.966 0 0 0-.468-1.068C9.835 1.897 9.17 1.282 8.5 1.077V4z"></path>
|
|
</svg></div>
|
|
<h5 class="fw-bold card-title">User-Focused Design</h5>
|
|
<p class="text-muted card-text mb-4">CS:Box is accessible on any device with a browser. Its web-based design ensures students can engage with computing concepts from any location, promoting independent learning and experimentation.</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div><!-- End: Features Cards -->
|
|
</section><!-- End: Service Cards -->
|
|
<!-- Start: Features Cards -->
|
|
<div class="container py-5">
|
|
<div class="row row-cols-1 row-cols-md-2 mx-auto">
|
|
<div class="col mb-5"><img class="rounded img-fluid shadow" src="/assets/img/Educational_Impact.webp?h=63a87115577f492ad78640012051f84a"></div>
|
|
<div class="col d-md-flex align-items-md-end align-items-lg-center mb-5">
|
|
<div>
|
|
<h5 class="fw-bold">Educational Impact</h5>
|
|
<p class="text-muted mb-4">CS:Box is more than a collection of interactive tools — it is a guided learning experience for students to understand complex computing concepts. By combining hands-on manipulation with visual feedback, it provides a scaffolded learning approach for students at different stages of their educational journey.<br><br>Whether students are learning binary for the first time or deepening their knowledge of hexadecimal and logic gates, CS:Box offers a clear, engaging, and practical method to achieve those learning goals. It exemplifies Mr. Davis' dedication to creating meaningful, student-friendly educational resources for the modern classroom.</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div><!-- End: Features Cards -->
|
|
</section><!-- Start: Footer Multi Column -->
|
|
<footer style="background: rgb(45,44,56);">
|
|
<div class="container py-4 py-lg-5">
|
|
<div class="row justify-content-center">
|
|
<!-- Start: About Project -->
|
|
<div class="col-sm-4 col-md-3 text-center text-lg-start d-flex flex-column">
|
|
<h1 style="font-size: 16px;font-weight: bold;margin-top: 10px;">About Project</h1><a href="https://github.com/MrDavisCSIT/CS-Box" target="_blank">
|
|
<div class="fw-bold d-flex align-items-center mb-2"><svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" fill="currentColor" viewBox="0 0 16 16" class="bi bi-github" style="font-size: 25px;margin-right: 10px;">
|
|
<path d="M8 0C3.58 0 0 3.58 0 8c0 3.54 2.29 6.53 5.47 7.59.4.07.55-.17.55-.38 0-.19-.01-.82-.01-1.49-2.01.37-2.53-.49-2.69-.94-.09-.23-.48-.94-.82-1.13-.28-.15-.68-.52-.01-.53.63-.01 1.08.58 1.23.82.72 1.21 1.87.87 2.33.66.07-.52.28-.87.51-1.07-1.78-.2-3.64-.89-3.64-3.95 0-.87.31-1.59.82-2.15-.08-.2-.36-1.02.08-2.12 0 0 .67-.21 2.2.82.64-.18 1.32-.27 2-.27.68 0 1.36.09 2 .27 1.53-1.04 2.2-.82 2.2-.82.44 1.1.16 1.92.08 2.12.51.56.82 1.27.82 2.15 0 3.07-1.87 3.75-3.65 3.95.29.25.54.73.54 1.48 0 1.07-.01 1.93-.01 2.2 0 .21.15.46.55.38A8.012 8.012 0 0 0 16 8c0-4.42-3.58-8-8-8"></path>
|
|
</svg><span>GitHub</span></div>
|
|
</a>
|
|
</div><!-- End: About Project -->
|
|
<!-- Start: About -->
|
|
<div class="col-sm-4 col-md-3 text-center text-lg-start d-flex flex-column"></div><!-- End: About -->
|
|
<!-- Start: Social Links -->
|
|
<div class="col-sm-4 col-md-3 text-center text-lg-start d-flex flex-column">
|
|
<h1 style="font-size: 16px;font-weight: bold;margin-top: 10px;">Social Media</h1>
|
|
<div class="row">
|
|
<div class="col-md-3"><a href="https://mstdn.social/@MrDavisCSIT" target="_blank"><svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" fill="currentColor" viewBox="0 0 16 16" class="bi bi-mastodon social-media">
|
|
<path d="M11.19 12.195c2.016-.24 3.77-1.475 3.99-2.603.348-1.778.32-4.339.32-4.339 0-3.47-2.286-4.488-2.286-4.488C12.062.238 10.083.017 8.027 0h-.05C5.92.017 3.942.238 2.79.765c0 0-2.285 1.017-2.285 4.488l-.002.662c-.004.64-.007 1.35.011 2.091.083 3.394.626 6.74 3.78 7.57 1.454.383 2.703.463 3.709.408 1.823-.1 2.847-.647 2.847-.647l-.06-1.317s-1.303.41-2.767.36c-1.45-.05-2.98-.156-3.215-1.928a3.614 3.614 0 0 1-.033-.496s1.424.346 3.228.428c1.103.05 2.137-.064 3.188-.189zm1.613-2.47H11.13v-4.08c0-.859-.364-1.295-1.091-1.295-.804 0-1.207.517-1.207 1.541v2.233H7.168V5.89c0-1.024-.403-1.541-1.207-1.541-.727 0-1.091.436-1.091 1.296v4.079H3.197V5.522c0-.859.22-1.541.66-2.046.456-.505 1.052-.764 1.793-.764.856 0 1.504.328 1.933.983L8 4.39l.417-.695c.429-.655 1.077-.983 1.934-.983.74 0 1.336.259 1.791.764.442.505.661 1.187.661 2.046v4.203z"></path>
|
|
</svg></a></div>
|
|
<div class="col-md-3"><a href="https://www.linkedin.com/in/alexanderedavis/" target="_blank"><svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" fill="currentColor" viewBox="0 0 16 16" class="bi bi-linkedin social-media">
|
|
<path d="M0 1.146C0 .513.526 0 1.175 0h13.65C15.474 0 16 .513 16 1.146v13.708c0 .633-.526 1.146-1.175 1.146H1.175C.526 16 0 15.487 0 14.854V1.146zm4.943 12.248V6.169H2.542v7.225h2.401m-1.2-8.212c.837 0 1.358-.554 1.358-1.248-.015-.709-.52-1.248-1.342-1.248-.822 0-1.359.54-1.359 1.248 0 .694.521 1.248 1.327 1.248h.016zm4.908 8.212V9.359c0-.216.016-.432.08-.586.173-.431.568-.878 1.232-.878.869 0 1.216.662 1.216 1.634v3.865h2.401V9.25c0-2.22-1.184-3.252-2.764-3.252-1.274 0-1.845.7-2.165 1.193v.025h-.016a5.54 5.54 0 0 1 .016-.025V6.169h-2.4c.03.678 0 7.225 0 7.225h2.4"></path>
|
|
</svg></a><a href="https://github.com/MrDavisCSIT" target="_blank"></a></div>
|
|
<div class="col-md-3"><svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" fill="currentColor" viewBox="0 0 16 16" class="bi bi-github social-media">
|
|
<path d="M8 0C3.58 0 0 3.58 0 8c0 3.54 2.29 6.53 5.47 7.59.4.07.55-.17.55-.38 0-.19-.01-.82-.01-1.49-2.01.37-2.53-.49-2.69-.94-.09-.23-.48-.94-.82-1.13-.28-.15-.68-.52-.01-.53.63-.01 1.08.58 1.23.82.72 1.21 1.87.87 2.33.66.07-.52.28-.87.51-1.07-1.78-.2-3.64-.89-3.64-3.95 0-.87.31-1.59.82-2.15-.08-.2-.36-1.02.08-2.12 0 0 .67-.21 2.2.82.64-.18 1.32-.27 2-.27.68 0 1.36.09 2 .27 1.53-1.04 2.2-.82 2.2-.82.44 1.1.16 1.92.08 2.12.51.56.82 1.27.82 2.15 0 3.07-1.87 3.75-3.65 3.95.29.25.54.73.54 1.48 0 1.07-.01 1.93-.01 2.2 0 .21.15.46.55.38A8.012 8.012 0 0 0 16 8c0-4.42-3.58-8-8-8"></path>
|
|
</svg></div>
|
|
<div class="col-md-3"></div>
|
|
</div>
|
|
</div><!-- End: Social Links -->
|
|
<!-- Start: Branding -->
|
|
<div class="col-lg-3 text-center text-lg-start d-flex flex-column align-items-center order-first align-items-lg-start order-lg-last">
|
|
<div class="fw-bold d-flex align-items-center mb-2"><img src="/assets/img/CSBoxLogo.svg?h=ca838acaf7f1bc97e10657f07ed63d71" style="width: 32px;margin: 5px;"><span>CS:Box</span></div>
|
|
<p class="text-muted">Computer Science Concept Simulators</p>
|
|
</div><!-- End: Branding -->
|
|
</div>
|
|
<hr>
|
|
<div class="text-muted d-flex justify-content-between align-items-center pt-3">
|
|
<p class="mb-0">Copyright © 2024 CS:Box<br>Powered By ADCM Networks</p>
|
|
</div>
|
|
</div>
|
|
</footer><!-- End: Footer Multi Column -->
|
|
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.7.0/jquery.min.js"></script>
|
|
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js"></script>
|
|
<script src="/assets/js/binary.js?h=122236ea60351806f6898510a67d196b"></script>
|
|
<script src="/assets/js/boldAndDark.js?h=78569998362133b84a76614652f3624f"></script>
|
|
<script src="/assets/js/hexadecimal.js?h=ed5c6d92d71af17004fe145227303d9d"></script>
|
|
<script src="/assets/js/hexColours.js?h=c64f15434dac1c095562a6a5fe8b155b"></script>
|
|
<script src="/assets/js/logicGates.js?h=0be60168b29f5bdee77760531f4a6858"></script>
|
|
</body>
|
|
|
|
</html> |