I have been learning web dev and have some minor knowledge of Python, so I set myself what I thought was a simple task of a set through the web app.
The first issue I’m stuck with (and I have no doubt there will be more when everyone looks at what I have so far) is that I have created sections that ask the user a Yes/No question. The user will click the corresponding button. I have also created a previous step button in case the user accidentally selects the wrong answer. As well as a back-to-main menu button.
Moving through the matrix shows only one section, which is fine. But at some point, when you drill through and want to go back a step or back to the start, it shows the last step, which isn’t what I want. Clicking back to the start will show the previous two sections/steps.
I feel this could be something simple I am missing, but I think I’m missing it when I try to debug
Also, I am curious if it would be better to do the backend logic with Python or if what I am doing is good enough for now, and I’m trying to overcomplicate it
What I want if the user clicks “back”
HTML
Made sure each section has a unique ID and includes the “Back” and “Start Over” buttons.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Fire Tank Troubleshooting Guide</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<header>
<h1>FFTTG System Won't Run</h1>
</header>
<main>
<section id="step1">
<h2>Step 1: System Won’t Turn On</h2>
<p>Hydraulic Pump Won’t Run</p>
<p>Are any LED’s illuminated on the Isolair Display Box?</p>
<button onclick="nextStep('step2Yes')">YES</button>
<button onclick="nextStep('step2No')">NO</button>
<button onclick="mainMenu()">Main Menu</button>
</section>
<section id="step2Yes" style="display:none;">
<h2>Step 2: Toggle the Jettison Switch</h2>
<p>Toggle the Jettison Switch a few times and make
sure it is in the normal operating position -UP.
Does the system turn on?</p>
<button onclick="nextStep('step3.0Yes')">YES</button>
<button onclick="nextStep('step3.1No')">NO</button>
<button onclick="prevStep()">Back</button>
<button onclick="startOver()">Start Over</button>
<button onclick="mainMenu()">Main Menu</button>
</section>
<section id="step2No" style="display:none;">
<h2>Step 2: Circuit Breakers</h2>
<p>Have any of the Circuit Breakers on the Isolair
Display box popped?</p>
<button onclick="nextStep('step3.2Yes')">YES</button>
<button onclick="nextStep('step3.3No')">NO</button>
<button onclick="prevStep()">Back</button>
<button onclick="startOver()">Start Over</button>
<button onclick="mainMenu()">Main Menu</button>
</section>
<section id="step3.0Yes" style="display:none;">
<h2>Step 3.1: Jettison Switch</h2>
<p>Jettison Switch was in ‘off’
position or was faulty and
beginning to fail. If this was
the case, change Jettison
switch ASAP</p>
<button onclick="prevStep()">Back</button>
<button onclick="startOver()">Start Over</button>
<button onclick="mainMenu()">Main Menu</button>
</section>
<section id="step3.1No" style="display:none;">
<h2>Step 3.1: Change Cyclic Controller</h2>
<p>Change Cyclic Controller. Does system turn on?</p>
<button onclick="nextStep('step4.1Yes')">YES</button>
<button onclick="nextStep('step4.2No')">NO</button>
<button onclick="prevStep()">Back</button>
<button onclick="startOver()">Start Over</button>
<button onclick="mainMenu()">Main Menu</button>
</section>
<section id="step3.2Yes" style="display:none;">
<h2>Step 3.2: Circuit Breakers</h2>
<p>Reset and try again</p>
<button onclick="prevStep()">Back</button>
<button onclick="startOver()">Start Over</button>
<button onclick="mainMenu()">Main Menu</button>
</section>
<section id="step3.3No" style="display:none;">
<h2>Step 3.2: Ground Power?</h2>
<p>Are you operating off ground power? (engines not running?)</p>
<button onclick="nextStep('step214Yes')">214 Ground Power</button>
<button onclick="nextStep('stepBUSNo')">204 & OR No</button>
<button onclick="prevStep()">Back</button>
<button onclick="startOver()">Start Over</button>
<button onclick="mainMenu()">Main Menu</button>
</section>
<section id="step214Yes" style="display:none;">
<h2>Step 214: Ground Power</h2>
<p>Ensure ‘NON-ESSENTIAL BUS’ is in the Manual position. Does System now turn on?</p>
<button onclick="nextStep('stepBUSYes')">Yes</button>
<button onclick="nextStep('stepBUSNo')">No</button>
<button onclick="prevStep()">Back</button>
<button onclick="startOver()">Start Over</button>
<button onclick="mainMenu()">Main Menu</button>
</section>
<section id="stepBUSYes" style="display:none;">
<h2>Step BUS: Manual Position</h2>
<p>214’s must always have ‘Manual’ selected when checking from ground power</p>
<button onclick="prevStep()">Back</button>
<button onclick="startOver()">Start Over</button>
<button onclick="mainMenu()">Main Menu</button>
</section>
<section id="stepBUSNo" style="display:none;">
<h2>Step NON-ESSENTIAL BUS / 204 / Ground power : Circuit Breakers Check</h2>
<p>Check ALL relevant aircraft Circuit Breakers. Continue with part 2.2 Circuit Breakers Check</p>
<button onclick="nextStep('stepCircuitBreakerCheck')">Circuit Breaker Check</button> <!-- Add Circuit Breaker check after building matrix-->
<button onclick="prevStep()">Back</button>
<button onclick="startOver()">Start Over</button>
<button onclick="mainMenu()">Main Menu</button>
</section>
<section id="step4.1Yes" style="display:none;">
<h2>Change Cyclic Controller</h2>
<p>Faulty Cyclic Controller. Use Wiring Diagram 6.1 to determine which switch (either Jettison or Door Switch) was faulty and replace ASAP</p>
<button onclick="nextStep('FaultyCyclicController')">Cyclic Wiring Diagram</button> <!-- Add Cyclic Wiring Diagram after building matrix-->
<button onclick="prevStep()">Back</button>
<button onclick="startOver()">Start Over</button>
<button onclick="mainMenu()">Main Menu</button>
</section>
<section id="step4.2No" style="display:none;">
<h2>Step 4.2: Change Pressure Switch</h2>
<p>Change Pressure Switch. Does the system now turn on?</p>
<button onclick="nextStep('step5.1Yes')">YES</button>
<button onclick="nextStep('step5.2No')">NO</button>
<button onclick="prevStep()">Back</button>
<button onclick="startOver()">Start Over</button>
<button onclick="mainMenu()">Main Menu</button>
</section>
<section id="step5.1Yes" style="display:none;">
<h2>Step 5.1: Pressure Switch Change</h2>
<p>Pressure Switch was faulty. Discard.</p>
<button onclick="prevStep()">Back</button>
<button onclick="startOver('step1')">Start Over</button>
<button onclick="mainMenu()">Main Menu</button>
</section>
<section id="step5.2No" style="display:none;">
<h2>Step 5.1: Wiring Or Relays</h2>
<p>Most likely a problem with wiring or relays. Begin a more thorough check, continue with para. 2.4.1- Tank Power Supply Check.</p>
<button onclick="nextStep('TankPowerSupplyCheck')">Tank Power Supply Check</button> <!-- Add Tank Power Supply Check after building matrix-->
<button onclick="prevStep()">Back</button>
<p font="bold">If Checks fail to locate the Problem, begin troubleshooting <span style="color: red; text-transform: uppercase;">again</span></p>
<button onclick="startOver('step1')">Start Over</button>
<button onclick="mainMenu()">Main Menu</button>
</section>
</main>type here
JavaScript
Updated the JavaScript to handle the navigation history and ensure that only the current step is visible.
tried to ensure the prevStep and startOver functions are properly hiding the current step before showing the previous step or the first step.
let historyStack = [];
function nextStep(stepId) {
const currentStep = document.querySelector('section:not([style*="display: none"])');
if (currentStep) {
historyStack.push(currentStep.id);
currentStep.style.display = 'none';
}
document.getElementById(stepId).style.display = 'block';
}
function prevStep() {
const currentStep = document.querySelector('section:not([style*="display: none"])');
if (currentStep) {
currentStep.style.display = 'none';
}
const prevStepId = historyStack.pop();
if (prevStepId) {
document.getElementById(prevStepId).style.display = 'block';
}
}
function startOver(stepId) {
const currentStep = document.querySelector('section:not([style*="display: none"])');
if (currentStep) {
currentStep.style.display = 'none';
}
historyStack = [];
document.getElementById(stepId).style.display = 'block';
}
function mainMenu() {
window.location.href = '/FFTTG/FFTG-Home.html';
}
CSS. I haven’t played around and debugged this too much as i don’t think this could be the issue
body {
font-family: Arial, sans-serif;
margin: 0;
padding: 0;
background-color: #f4f4f4;
}
header {
background-color: #333;
color: #fff;
padding: 1em 0;
text-align: center;
}
main {
padding: 1em;
}
section {
margin-bottom: 1em;
}
button {
margin: 0.5em;
padding: 0.5em 1em;
background-color: #007bff;
color: #fff;
border: none;
cursor: pointer;
}
button:hover {
background-color: #0056b3;
}
footer {
background-color: #333;
color: #fff;
text-align: center;
padding: 1em 0;
position: fixed;
width: 100%;
bottom: 0;
}
.card {
border: 1px solid #ccc;
padding: 1em;
margin: 1em 0;
background-color: #fff;
}
.card img {
max-width: 100px;
margin-right: 10px;
vertical-align: middle;
}
#Control-box-front {
transition: all 0.3s ease;
}
#Control-box-front:hover {
content: url('public/images/Control-box-front-green.png');
}
/* From Uiverse.io by chase2k25 */
.card {
width: 400px;
height: 400px;
border-radius: 8px;
background: linear-gradient(145deg, #333, #000);
display: flex;
flex-direction: column;
gap: 5px;
padding: 0.4em;
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3);
overflow: hidden;
}
.card p {
flex: 1;
overflow: hidden;
cursor: pointer;
border-radius: 8px;
transition: flex 0.5s;
background: linear-gradient(145deg, #212121, #000);
display: flex;
justify-content: center;
align-items: flex-start; /* Align items at the top */
}
.card p:hover {
flex: 4;
}
.card p span {
padding: 0.2em;
text-align: center;
transform: rotate(-0deg);
transition: transform 0.5s;
text-transform: uppercase;
color: white;
font-weight: bold; /* Removed quotes */
letter-spacing: 0.1em;
position: relative;
z-index: 1;
}
.card p:hover span {
transform: rotate(0);
}
.card p::before {
content: "";
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: rgba(255, 255, 255, 0.1);
z-index: 0;
transition: opacity 0.5s;
pointer-events: none;
opacity: 0;
}
.card p:hover::before {
opacity: 1;
}
.card p img {
max-width: 350px;
margin-right: 10px;
}
