aqa spec

RasperRevision · Jul 2, 2024 · 02d2306 · 02d2306
1 parent 3241347
commit 02d2306
Show file tree

Hide file tree

Showing 21 changed files with 181 additions and 19,475 deletions.
diff --git a/specification/.gitignore b/specification/.gitignore
diff --git a/specification/README.md b/specification/README.md
diff --git a/specification/src/exam-boards/aqa.json → specification/aqa.json b/specification/src/exam-boards/aqa.json → specification/aqa.json
diff --git a/specification/index.html b/specification/index.html
@@ -0,0 +1,181 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <title>AQA Specification</title>
+  <link rel="stylesheet" src="/style.css">
+
+  <!-- FAVICON -->
+  <link rel="icon" type="image/png" href="/assets/favicon.png">
+
+  <!-- BOOTSTRAP STYLES -->
+  <link href="/node_modules/bootstrap/dist/css/bootstrap.min.css" rel="stylesheet">
+  <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet">
+
+  <!-- BOOTSTRAP SCRIPTS-->
+  <script src="/node_modules/bootstrap/dist/js/bootstrap.min.js"></script>
+  <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script>
+
+  <!-- BOOTSTRAP ICONS -->
+  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/font/bootstrap-icons.min.css">
+
+  <style>
+    #diagramWrapper {
+      width: 100%;
+      height: 100vh;
+      transform: scale(2);
+    }
+
+    #diagram {
+      width: 100%;
+      height: 100%;
+    }
+
+    body {
+      overflow: hidden;
+    }
+  </style>
+</head>
+
+<body class="bg-darker">
+  <div id="diagramWrapper">
+    <svg id="diagram"></svg>
+  </div>
+  <div class="d-flex sidebar-wrapper" id="wrapper"></div>
+
+  <script src="/sidebar.js"></script>
+
+  <script src="https://d3js.org/d3.v7.min.js"></script>
+  <script>
+
+    async function fetchJSON() {
+      return await (await fetch('aqa.json')).json();
+    }
+
+    document.addEventListener('DOMContentLoaded', () => {
+      fetchJSON().then(data => {
+        const svgRef = document.getElementById('diagram');
+
+        let visibleNodes = new Set(['AQA']);
+        data.children.forEach(child => visibleNodes.add(child.name));
+
+        const width = Math.max(document.documentElement.clientWidth || 0, window.innerWidth || 0);
+        const height = Math.max(document.documentElement.clientHeight || 0, window.innerHeight || 0);
+        const radius = Math.min(width, height) / 2;
+
+        const svg = d3.select(svgRef)
+          .attr('width', width)
+          .attr('height', height)
+          .append('g')
+          .attr('transform', `translate(${width / 2},${height / 2})`);
+
+        const root = d3.hierarchy(data);
+
+        const tree = d3.tree()
+          .size([2 * Math.PI, radius - 100])
+          .separation(() => 1);
+
+        tree(root);
+
+        const links = root.links();
+        const nodes = root.descendants();
+
+        svg.selectAll('line')
+          .data(links)
+          .enter()
+          .append('line')
+          .attr('x1', d => project(d.source.x, d.source.y)[0])
+          .attr('y1', d => project(d.source.x, d.source.y)[1])
+          .attr('x2', d => project(d.target.x, d.target.y)[0])
+          .attr('y2', d => project(d.target.x, d.target.y)[1])
+          .attr('stroke', '#ddd')
+          .attr('stroke-width', 0.5);
+
+        const node = svg.selectAll('g.node')
+          .data(nodes)
+          .enter()
+          .append('g')
+          .attr('class', 'node')
+          .attr('transform', d => `translate(${project(d.x, d.y)})`)
+          .attr('cursor', 'pointer')
+          .on('click', (event, d) => {
+            setFocusedNode(d);
+            updateVisibleNodes(d);
+            const [x, y] = project(d.x, d.y);
+            svg.transition()
+              .duration(750)
+              .attr('transform', `translate(${width / 2 - x},${height / 2 - y})`);
+          });
+
+        const text = node.append('text')
+          .attr('dy', '0.31em')
+          .text(d => d.data.name)
+          .style('text-anchor', 'middle')
+          .style('visibility', d => (visibleNodes.has(d.data.name) || d.depth === 0) ? 'visible' : 'hidden')
+          .style('fill', 'white');
+
+
+        text.each(function (d) {
+          d.bbox = this.getBBox();
+        });
+
+        const padding = 18;
+
+        node.insert('rect', 'text')
+          .attr('x', d => -d.bbox.width / 2 - (padding / 2))
+          .attr('y', d => -d.bbox.height / 2 - (padding / 2))
+          .attr('height', d => d.bbox.height + padding)
+          .attr('width', d => d.bbox.width + padding)
+          .attr('rx', 5)
+          .attr('ry', 5)
+          .attr('fill', 'white')
+          .style('visibility', d => (visibleNodes.has(d.data.name) || d.depth === 0) ? 'visible' : 'hidden');
+
+        function project(x, y) {
+          const angle = x - Math.PI / 2;
+          return [Math.cos(angle) * y, Math.sin(angle) * y];
+        }
+
+        function setFocusedNode(node) {
+          focusedNode = node;
+        }
+
+        function updateVisibleNodes(node) {
+          const newVisibleNodes = new Set(['AQA']);
+          root.children.forEach(subject => newVisibleNodes.add(subject.data.name));
+          if (node.depth === 2) {
+            root.children.forEach(subject => {
+              subject.children.forEach(unit => {
+                if (unit === node) {
+                  unit.children.forEach(topic => newVisibleNodes.add(topic.data.name));
+                }
+              });
+            });
+          } else if (node.depth === 1) {
+            node.children.forEach(unit => newVisibleNodes.add(unit.data.name));
+          }
+          let parent = node;
+          while (parent) {
+            newVisibleNodes.add(parent.data.name);
+            parent = parent.parent;
+          }
+          visibleNodes = newVisibleNodes;
+          updateNodeVisibility();
+        }
+
+        function updateNodeVisibility() {
+          node.selectAll('text')
+            .style('visibility', d => (visibleNodes.has(d.data.name) || d.depth === 0) ? 'visible' : 'hidden');
+          node.selectAll('rect')
+            .style('visibility', d => (visibleNodes.has(d.data.name) || d.depth === 0) ? 'visible' : 'hidden');
+        }
+      })
+
+    });
+
+  </script>
+</body>
+
+</html>