5.2 Decision Tree Tool
Loading...
Loading...
---
title: "5.2 Decision Tree Tool"
format: html
---
```{=html}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Decision Tree with Navigation</title>
<style>
body {
font-family: Arial, sans-serif;
max-width: 600px;
margin: 20px auto;
text-align: center;
}
.box {
border: 2px solid #ccc;
border-radius: 5px;
padding: 20px;
margin: 20px 0;
}
.question-container {
background-color: rgb(106, 139, 137, 0.2);
}
.answer-buttons {
display: flex;
justify-content: center;
gap: 20px;
}
button {
padding: 10px 30px;
font-size: 16px;
cursor: pointer;
}
.navigation-buttons {
display: flex;
justify-content: space-between;
gap: 10px;
}
.result {
font-size: 20px;
color: green;
}
</style>
</head>
<body>
<div id="app">
<!-- Question or Result Box -->
<div id="question-container" class="box question-container">
<p class="question" id="question">Loading...</p>
<p id="result" class="result"></p>
</div>
<!-- Answer Buttons Box -->
<div id="answer-container" class="box">
<div class="answer-buttons" id="answers"></div>
</div>
<!-- Navigation Buttons Box -->
<div id="navigation-container" class="box">
<div class="navigation-buttons">
<button id="back-button" disabled>Back</button>
<button id="reset-button">Reset</button>
<button id="forward-button" disabled>Forward</button>
</div>
</div>
</div>
<script>
const decisionTree = {
question: "Is the Grip/Gully eroding?",
answers: {
YES: {
question: "Is there any peat in the base?",
answers: {
NO: {
question: "Is the mineral base vegetated?",
answers: {
NO: {
question: "Is it large enough for a stone drop?",
answers: {
YES: {
question: "Is it wider than 3m?",
answers: {
YES: { result: "Stone baffle" },
NO: { result: "Stone dam" }
}
},
NO: {
question: "Is the slope shallow enough for coir logs or heather bales?",
answers: {
NO: { result: "Consider if stone could be handballed in" },
YES: { result: "Coir log/heather bale" }
}
}
}
},
YES: {
question: "Confirm if the sides are eroding",
answers: {
YES: {
question: "Is it large enough for a stone drop?",
answers: {
YES: {
question: "Is it wider than 3m?",
answers: {
YES: { result: "Stone baffle" },
NO: { result: "Stone dam" }
}
},
NO: {
question: "Is the slope shallow enough for coir logs or heather bales?",
answers: {
NO: { result: "Consider if stone could be handballed in" },
YES: { result: "Coir log/heather bale" }
}
}
}
},
NO: {
result: "No work Necessary (NWN)"
}
}
}
}
},
YES: {
question: "Is the peat shallower than 30cm?",
answers: {
NO: {
question: "Is the peat vegetated with sphagnum present?",
answers: {
YES: {
question: "Is it less than 3m wide?",
answers: {
YES: { result: "Timber dam" },
NO: { result: "Timber baffle" }
}
},
NO: {
question: "Is it less than 3m wide?",
answers: {
YES: { result: "Peat dam" },
NO: { result: "Timber baffle" }
}
}
}
},
YES: {
question: "Is it large enough for a stone drop?",
answers: {
YES: {
question: "Is it wider than 3m?",
answers: {
YES: { result: "Stone baffle" },
NO: { result: "Stone dam" }
}
},
NO: {
question: "Is the slope shallow enough for coir logs or heather bales?",
answers: {
NO: { result: "Consider if stone could be handballed in" },
YES: { result: "Coir log/heather bale" }
}
}
}
}
}
}
}
},
NO: { result: "No work Necessary (NWN)" }
}
};
const questionContainer = document.getElementById("question-container");
const questionElement = document.getElementById("question");
const answersElement = document.getElementById("answers");
const resultElement = document.getElementById("result");
const backButton = document.getElementById("back-button");
const forwardButton = document.getElementById("forward-button");
const resetButton = document.getElementById("reset-button");
let history = [];
let currentIndex = -1;
function displayNode(node, isNavigating = false) {
if (!isNavigating) {
// Add to history if navigating normally
history = history.slice(0, currentIndex + 1); // Remove forward steps
history.push(node);
currentIndex++;
}
// Handle result nodes
if (node.result) {
questionElement.textContent = "";
resultElement.textContent = `Result: ${node.result}`;
answersElement.innerHTML = "";
updateNavigationButtons();
return;
}
// Display question and answers
questionElement.textContent = node.question;
resultElement.textContent = "";
answersElement.innerHTML = "";
// Sort YES before NO (or generally alphabetical for consistency)
const sortedAnswers = Object.entries(node.answers).sort(([a], [b]) => a.localeCompare(b));
for (const [key, nextNode] of sortedAnswers) {
const button = document.createElement("button");
button.textContent = key;
button.onclick = () => displayNode(nextNode);
answersElement.appendChild(button);
}
updateNavigationButtons();
}
function updateNavigationButtons() {
backButton.disabled = currentIndex <= 0;
forwardButton.disabled = currentIndex >= history.length - 1;
}
// Add event listeners for navigation buttons
backButton.onclick = () => {
if (currentIndex > 0) {
currentIndex--;
displayNode(history[currentIndex], true);
}
};
forwardButton.onclick = () => {
if (currentIndex < history.length - 1) {
currentIndex++;
displayNode(history[currentIndex], true);
}
};
resetButton.onclick = () => {
history = [];
currentIndex = -1;
displayNode(decisionTree);
};
// Start the decision tree
displayNode(decisionTree);
</script>
</body>
</html>
```