From fc41347a0ed8bd69e5b73279df0c6126dad39607 Mon Sep 17 00:00:00 2001
From: WetGato <127610480+WetGato@users.noreply.github.com>
Date: Sat, 30 Nov 2024 19:31:20 +0200
Subject: [PATCH 1/3] Create static
---
.github/workflows/static | 52 ++++++++++++++++++++++++++++++++++++++++
1 file changed, 52 insertions(+)
create mode 100644 .github/workflows/static
diff --git a/.github/workflows/static b/.github/workflows/static
new file mode 100644
index 0000000..931178b
--- /dev/null
+++ b/.github/workflows/static
@@ -0,0 +1,52 @@
+name: Deploy static content to Pages
+
+on:
+ # Runs on pushes targeting both the main and dev branches
+ push:
+ branches:
+ - "main"
+ - "dev"
+
+ # Allows you to run this workflow manually from the Actions tab
+ workflow_dispatch:
+
+permissions:
+ contents: read
+ pages: write
+ id-token: write
+
+concurrency:
+ group: "pages"
+ cancel-in-progress: false
+
+jobs:
+ deploy_main:
+ # Job to deploy `main` branch to the root (`/`)
+ runs-on: ubuntu-latest
+ steps:
+ - name: Checkout main branch
+ uses: actions/checkout@v4
+ with:
+ ref: main
+
+ - name: Checkout dev branch
+ uses: actions/checkout@v4
+ with:
+ ref: dev
+ path: dev
+
+ - name: Setup Pages
+ uses: actions/configure-pages@v5
+
+ - name: Upload artifact for main branch
+ uses: actions/upload-pages-artifact@v3
+ with:
+ path: '.' # Upload entire repository (main branch)
+ name: 'main-artifact' # Unique artifact name for main branch
+
+ - name: Deploy to GitHub Pages (Main)
+ id: deployment_main
+ uses: actions/deploy-pages@v4
+ with:
+ token: ${{ secrets.GITHUB_TOKEN }}
+ artifact_name: 'main-artifact'
From 14b262261285f0525ede3b3bd0275819681f853e Mon Sep 17 00:00:00 2001
From: WetGato <127610480+WetGato@users.noreply.github.com>
Date: Sat, 30 Nov 2024 19:31:52 +0200
Subject: [PATCH 2/3] Rename static to static.yaml
---
.github/workflows/{static => static.yaml} | 0
1 file changed, 0 insertions(+), 0 deletions(-)
rename .github/workflows/{static => static.yaml} (100%)
diff --git a/.github/workflows/static b/.github/workflows/static.yaml
similarity index 100%
rename from .github/workflows/static
rename to .github/workflows/static.yaml
From 86f422785b4ae359dd8d62478f8d38c0901f4944 Mon Sep 17 00:00:00 2001
From: WetGato <127610480+WetGato@users.noreply.github.com>
Date: Sun, 1 Dec 2024 00:28:54 +0200
Subject: [PATCH 3/3] Dev (#1)
New Features
* Added capability to have pictures
Fixed Bugs
* The text next to the radio buttons does not select the radio buttons.
* fixed incorrect syntax in wood_structures.json
---
airframe.json | 4 +-
index.html | 12 +++++-
script.js | 94 +++++++++++++++++++++++++-------------------
wood_structures.json | 12 ++++++
4 files changed, 78 insertions(+), 44 deletions(-)
create mode 100644 wood_structures.json
diff --git a/airframe.json b/airframe.json
index 4a15e5b..3d822b1 100644
--- a/airframe.json
+++ b/airframe.json
@@ -1,8 +1,8 @@
{
"files": [
{
- "title": "part1",
- "file": "part1.json"
+ "title": "Wood Structures",
+ "file": "wood_structures.json"
},
{
"title": "part2",
diff --git a/index.html b/index.html
index 428af03..8650bd7 100644
--- a/index.html
+++ b/index.html
@@ -19,6 +19,9 @@
overflow: hidden;
box-sizing: border-box;
}
+ img {
+ width: 33VH;
+ }
#sidePane {
width: 225px;
background-color: #f4f4f4;
@@ -61,6 +64,11 @@
height: auto;
flex: none/* Position main content above sidebar */
}
+ #pictureFrame {
+ width: calc(100vw - 30px);
+ }
+ img {
+ width: calc(100vw - 40px);
}
@@ -73,11 +81,13 @@ Questions
Select a Quiz
+
-
+
+
diff --git a/script.js b/script.js
index af11272..d95909d 100644
--- a/script.js
+++ b/script.js
@@ -15,6 +15,16 @@ function openDialog() {
dialog.showModal();
}
+function closePicture() {
+ const dialog = document.getElementById("pictureFrame");
+ dialog.close();
+};
+
+function openPicture() {
+ const dialog = document.getElementById("pictureFrame");
+ dialog.showModal();
+}
+
function loadSelectedJsonFile() { // Get the user selection in the drop-down menu for selection of the group
const dropdown = document.getElementById("quizDropdown");
const selectedFile = dropdown.value;
@@ -40,17 +50,17 @@ function selectSections(file) { //Load the file for selections and populate the
const div = document.createElement("div");
div.id = file.title;
listItem.appendChild(div);
- const dropdown = document.getElementById(file.title);
- const checkbox = document.createElement("input");
- checkbox.value = file.file;
- checkbox.id = file.file;
- checkbox.type = "checkbox";
- checkbox.innerText = file.title;
- dropdown.appendChild(checkbox);
- const text = document.createElement("label");
- text.for = file.file;
- text.innerText = file.title;
- dropdown.appendChild(text);
+ const subCategoryForm = document.getElementById(file.title);
+ const subCategory = document.createElement("input");
+ subCategory.value = file.file;
+ subCategory.id = file.file;
+ subCategory.type = "checkbox";
+ subCategory.innerText = file.title;
+ subCategoryForm.appendChild(subCategory);
+ const subCategoryLabel = document.createElement("label");
+ subCategoryLabel.for = file.file;
+ subCategoryLabel.innerText = file.title;
+ subCategoryForm.appendChild(subCategoryLabel);
});
})
.catch(error => {
@@ -78,10 +88,10 @@ function loadIndex() { // Load index.json file then populate the dropdown
const files = data.files;
const dropdown = document.getElementById("quizDropdown");
files.forEach(file => {
- const option = document.createElement("option");
- option.value = file.file;
- option.innerText = file.title;
- dropdown.appendChild(option);
+ const category = document.createElement("option");
+ category.value = file.file;
+ category.innerText = file.title;
+ dropdown.appendChild(category);
});
})
.catch(error => {
@@ -102,26 +112,6 @@ function toggleFlag() {
renderQuestionList();
}
-/*function loadQuestions(file) { //TODO add capability to handle multiple files.
- console.log (file);
- fetch(file)
- .then(response => response.json())
- .then(data => {
- questions = data;
- shuffleArray(questions);
- questions.forEach(question => {
- shuffleArray(question.options);
- });
- renderQuestionList();
- displayQuestion();
- document.getElementById("scoreDisplay").innerText = `Score: Not graded yet`;
- })
- .catch(error => {
- console.error("Error loading questions file:", error);
- });
-}
-*/
-
function loadQuestions(files) {
console.log("Loading files:", files);
questions = [];
@@ -200,6 +190,7 @@ function displayQuestion() {
const questionData = questions[currentQuestion];
const questionElement = document.getElementById("question");
const optionsForm = document.getElementById("optionsForm");
+
questionElement.innerText = questionData.question;
optionsForm.innerHTML = ""; // Clear previous options
@@ -207,25 +198,46 @@ function displayQuestion() {
questionData.options.forEach(option => {
const optionContainer = document.createElement("div");
const optionInput = document.createElement("input");
+ const optionLabel = document.createElement("label");
optionInput.type = "radio";
optionInput.name = "option";
optionInput.value = option;
+ optionInput.id = option;
optionInput.checked = userAnswers[currentQuestion] === option;
-
optionInput.onclick = () => selectOption(option);
-
- const optionLabel = document.createElement("label");
+ optionLabel.setAttribute('for', optionInput.id);
optionLabel.innerText = option;
optionContainer.appendChild(optionInput);
optionContainer.appendChild(optionLabel);
optionsForm.appendChild(optionContainer);
- if (quizGraded && option === questions[currentQuestion].answer) {
- optionLabel.style.color = "green";
- optionLabel.style.fontWeight = "bold"; // Optional: Bold the correct answer
+ if (quizGraded && option === questions[currentQuestion].answer) {
+ optionLabel.style.color = "green";
+ optionLabel.style.fontWeight = "bold"; // Optional: Bold the correct answer
}
});
+ if (questionData.img) {
+ const body = document.body;
+ const pictureFrame = document.createElement("dialog")
+ const picture = document.createElement("img");
+ const buttonPanel = document.getElementById("questionControl");
+ const openPictureButton = document.createElement("button");
+ const closePictureButton = document.createElement("button");
+ const br = document.createElement("br");
+
+ pictureFrame.id = "pictureFrame";
+ picture.src = questionData.img;
+ body.appendChild(pictureFrame);
+ pictureFrame.appendChild(picture);
+ pictureFrame.appendChild(br);
+ openPictureButton.onclick = openPicture;
+ closePictureButton.onclick = closePicture;
+ closePictureButton.innerHTML = "Close";
+ openPictureButton.innerHTML = "Show Picture";
+ pictureFrame.appendChild(closePictureButton);
+ buttonPanel.appendChild(openPictureButton);
+ }
}
diff --git a/wood_structures.json b/wood_structures.json
new file mode 100644
index 0000000..9e713ed
--- /dev/null
+++ b/wood_structures.json
@@ -0,0 +1,12 @@
+[
+ {
+ "question": "How would you inspect for rot (decay)?",
+ "options": [
+ "Inspect for a dark discolouration of the wood surface or gray stains along the grain.",
+ "Look for signs of termintes.",
+ "Apply a coating of oil and look for where it turns blue"
+ ],
+ "answer": "Inspect for a dark discolouration of the wood surface or gray stains along the grain.",
+ "img": "https://2793236.fs1.hubspotusercontent-na1.net/hub/2793236/hubfs/Stock-images-118.png"
+ }
+]
\ No newline at end of file