Many thanks for all the comments. I now have code which works 100% as envisaged:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
<head>
<title>Dislocation of Artificial Hip Joint</title>
<script src="https://code.jquery.com/jquery-3.7.1.js"></script>
<!-- https://github.com/jquery/jquery/blob/main/LICENSE.txt -->
<script>
window.addEventListener('keydown', function (e) {
// Process e object
var key = e.which
if (e.ctrlKey) { key = "ctrl"+key; }
if (e.altKey) { key = "alt"+key; }
if (e.shiftKey) { key = "shift"+key; }
// Ctrl+C
if (key == "ctrl67") {
// Preserve default
return;
}
// Ctrl+F
if (key == "ctrl70") {
// Preserve default
return;
}
// Space
if (key == "32") {
// Preserve default
return;
}
// TAB
if (key == "9") {
// Preserve default
return;
}
// Shift+TAB
if (key == "shift9") {
// Preserve default
return;
}
// LeftArrow
if (key == "37") {
// Preserve default
return;
}
// RightArrow
if (key == "39") {
// Preserve default
return;
}
// Enter - if radio button send space
if (key == "13") {
if($("input[type=radio]").is(':focus')){
// Dissable default
e.preventDefault();
// Simulate Space
let inputs = $('input');
let index_input = inputs.index($('#' + e.target.id));
inputs.eq(index_input).click();
} else {
// Preserve default
return;
}
}
// DownArrow - if radio button send TAB
if (key == "40") {
if($("input[type=radio]").is(':focus')){
// Dissable default
e.preventDefault();
// Simulate TAB to move to next radio group
let inputs = $('input');
let index_input = inputs.index($('#' + e.target.id));
let next = inputs.eq(index_input + 2);
next.focus();
} else {
// Preserve default
return;
}
}
// UpArrow - if radio button send Shift+TAB
if (key == "38") {
if($("input[type=radio]").is(':focus')){
// Dissable default
e.preventDefault();
// Simulate Shift+TAB to move to prev radio group
let inputs = $('input');
let index_input = inputs.index($('#' + e.target.id));
let next = inputs.eq(index_input - 2);
next.focus();
} else {
// Preserve default
return;
}
}
// Dissable fall-through and all remaining keyboard shortcuts
e.preventDefault();
});
</script>
<style>
body {
margin: 20;
}
.Q {
margin: 10;
}
input[type='radio']{
transform: scale(2);
margin:10px;
margin-bottom: 15px;
}
</style>
</head>
<body>
<h1>Hip Replacement Dislocation</h1>
<h2>Introduction</h2>
These questions will help you assess, document and treat patients with dislocations of their total hip replacements.<br>
<br>
Unfortunately patients with unstable hips may present several time in ED, before remedial surgery is undertaken.
<H2>Questions</h2>
<div id="Q0" class="Q" style="display:block">
Does your patient have a total hip replacement or hip resurfacing?
<br>
Yes <input class="Y" name="Q0" id="Q0y" type="radio" onchange="Q0();">
No <input class="N" name="Q0" id="Q0n" type="radio" onchange="Q0();">
<script type="text/javascript">
function Q0() {
// Hide future questions
$('.Q').slice(0+1).hide();
// Clear future question responses
$('.Y').slice(0+1).prop('checked', false);
$('.N').slice(0+1).prop('checked', false);
// Jump to selected question
if ($('#Q0y').is(':checked')) {
$("#Q1").css("display","block");
$("#Q1y").trigger('focus');
} else {
$("#Q101").css("display","block");
}
}
</script>
</div>
<div id="Q1" class="Q" style="display:none">
Do x-rays show the ball outside the socket?<br>
NB. After some years of wear the ball is allowed to be eccentric in the socket.<br>
Yes <input class="Y" name="Q1" id="Q1y" type="radio" onchange="Q1();">
No <input class="N" name="Q1" id="Q1n" type="radio" onchange="Q1();">
<script type="text/javascript">
function Q1() {
$('.Q').slice(1+1).hide();
$('.Y').slice(1+1).prop('checked', false);
$('.N').slice(1+1).prop('checked', false);
if ($('#Q1y').is(':checked')) {
$("#Q2").css("display","block");
$("#Q2y").trigger('focus');
} else {
$("#Q102").css("display","block");
}
}
</script>
</div>
<div id="Q2" class="Q" style="display:none">
Is there an open wound, loss of innervation or loss of blood supply!
<br>
Yes <input class="Y" name="Q2" id="Q2y" type="radio" onchange="Q2();">
No <input class="N" name="Q2" id="Q2n" type="radio" onchange="Q2();">
<script type="text/javascript">
function Q2() {
$('.Q').slice(2+1).hide();
$('.Y').slice(2+1).prop('checked', false);
$('.N').slice(2+1).prop('checked', false);
if ($('#Q2y').is(':checked')) {
$("#Q103").css("display","block");
} else {
$("#Q3").css("display","block");
$("#Q3y").trigger('focus');
}
}
</script>
</div>
<div id="Q3" class="Q" style="display:none">
Typically the whole leg is rotated with a hip dislocation.<br>
Which way is the leg rotated - toes pointing?
<br>
Inward <input class="Y" name="Q3" id="Q3y" type="radio" onchange="Q3();">
Outward <input class="N" name="Q3" id="Q3n" type="radio" onchange="Q3();">
<script type="text/javascript">
function Q3() {
$('.Q').slice(3+1).hide();
$('.Y').slice(3+1).prop('checked', false);
$('.N').slice(3+1).prop('checked', false);
if ($('#Q3y').is(':checked')) {
$("#Q4").css("display","block");
} else {
$("#Q5").css("display","block");
}
}
</script>
</div>
<div id="Q4" class="Q" style="display:none">
<h2>Advice</h2>
This is a posterior dislocation of the artificial hip.<br>
<br>
Please document your findings:<br>
<ul>
<li>Radiologically proven dislocation</li>
<li>Posterior direction</li>
<li>Number of previous dislocations</li>
<li>No fractures or complex implants</li>
<li>No loss of innervation</li>
<li>No loss of blood supply</li>
</ul>
Assuming a suitable patient with no other injuries, this should be reduced by the ED staff in line with locally agreed procedure:
<ul>
<li><a href=https://www.youtube.com/watch?v=yGU2zqHt-BQ target="_blank">YouTube (81 seconds)</a></li>
</ul>
For a very unstable hip, splinting the knee will inhibit hip flexion, and may reduce the risk of recurrent posterior dislocation.
</div>
<div id="Q5" class="Q" style="display:none">
<h2>Advice</h2>
This is an anterior dislocation of the artificial hip.<br>
<br>
Please document your findings:<br>
<ul>
<li>Radiologically proven dislocation</li>
<li>Anterior direction</li>
<li>Number of previous dislocations</li>
<li>No fractures or complex implants</li>
<li>No loss of innervation</li>
<li>No loss of blood supply</li>
</ul>
Assuming a suitable patient with no other injuries, this should be reduced by the ED staff in line with locally agreed procedure:
<ul>
<li><a href=https://www.youtube.com/watch?v=oiKQxgbrOcA target="_blank">YouTube (89 seconds)</a></li>
</ul>
Splinting the knee, will not reduce the risk of recurrent anterior dislocation.
</div>
<div id="Q101" class="Q" style="display:none">
<h2>End of help</h2>
These questions are only valid for dislocation of total hip replacements.<br>
<br>
Dislocation of a native hip or a hemiarthroplasty, have their own pages.
</div>
<div id="Q102" class="Q" style="display:none">
<h2>End of help</h2>
If the ball is inside to socket, then the hip is not dislocated.
<br>
<br>
Look at the x-rays carefully for other causes of sudden hip pain and leg shortening:
<ul>
<li>Periprosthetic fracture of the femur</li>
<li>Periprosthetic fracture of the acetabulum</li>
<li>Fracture of the stem</li>
<li>Dissassembly of the liner in uncemented cups</li>
</ul>
If you can't make a diagnosis, call the orthopaedic team for help.
</div>
<div id="Q103" class="Q" style="display:none">
<h2>End of help</h2>
Complicated artificial hip dislocations are uncommon - you will need help.
<br>
<br>
Before calling the orthopaedic team:
<ul>
<li>For open wounds, please immediately give intravenous broad spectrum antibiotics and tetanus cover</li>
<li>For patients with loss of innervation, please document MRC power grading and map loss of sensation</li>
<li>For patients with loss of blood supply, please check with doppler for pulses</li>
</ul>
Now call the orthopaedic team for help.
</div>
<script>
$("#Q0y").focus();
</script>
</body>
</html>Using this template I can generate unlimited pages with easily accessible Y/N decision trees.
Kind Regards Gavin Holt