javascript - How to change Enter, Up, and Down arrow key actions to use multiple radio groups?

I have made an offline decision support tool in a single HTML page.

The page asks a series of Y/N questions, with strictly binary branching, using horizontally arranged radio buttons. Then shows the relevant hidden div, either with more questions - or terminating with advice.

jQuery is used for the slice function, which helps hide previously answered questions, when earlier responses are changed.

The default keyboard shortcuts are almost unknown to my audience. Therefore, I feel no guilt changing the keyboard actions.

Q1. How can I re-task the Up and Down arrow keys to navigate to the next/previous radio group respectively - with focus (i.e. mimic TAB and Shift+TAB)?

Q2. How can I re-task the enter key to select the current radio button and move on - with focus (i.e. mimic Space)? I am not submitting a form, so I have no other use for the enter key.

My incomplete keyboard handler is included below. There are TODO markers where I need help.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
<head>
<title>Dislocation of Artificial Hip Joint</title>

<script src=".7.1.js"></script>
<!-- .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;    }

    // ESC - a test
    if (key == "27") {
        // window.close();
        return;
    }

    // Ctrl+C
    if (key == "ctrl67") {
        // Preserve default
        return;
    }

    // Ctrl+F
    if (key == "ctrl70") {
        // Preserve default
        return;
    }

    // Radio Button Shortcuts

    // 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 TODO:
        } 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 TODO:

        } 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 TODO:

        } 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="javascript:Q0();">
    No <input class="N" name="Q0" id="Q0n" type="radio"  onchange="javascript: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="javascript:Q1();">
    No <input class="N" name="Q1" id="Q1n" type="radio"  onchange="javascript: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="javascript:Q2();">
    No <input class="N" name="Q2" id="Q2n" type="radio"  onchange="javascript: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="javascript:Q3();">
    Outward <input class="N" name="Q3" id="Q3n" type="radio"  onchange="javascript: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 you 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= 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 you 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= 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>

I have made an offline decision support tool in a single HTML page.

jQuery is used for the slice function, which helps hide previously answered questions, when earlier responses are changed.

The default keyboard shortcuts are almost unknown to my audience. Therefore, I feel no guilt changing the keyboard actions.

Q1. How can I re-task the Up and Down arrow keys to navigate to the next/previous radio group respectively - with focus (i.e. mimic TAB and Shift+TAB)?

Q2. How can I re-task the enter key to select the current radio button and move on - with focus (i.e. mimic Space)? I am not submitting a form, so I have no other use for the enter key.

My incomplete keyboard handler is included below. There are TODO markers where I need help.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
<head>
<title>Dislocation of Artificial Hip Joint</title>

<script src="https://code.jquery/jquery-3.7.1.js"></script>
<!-- https://github/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;    }

    // ESC - a test
    if (key == "27") {
        // window.close();
        return;
    }

    // Ctrl+C
    if (key == "ctrl67") {
        // Preserve default
        return;
    }

    // Ctrl+F
    if (key == "ctrl70") {
        // Preserve default
        return;
    }

    // Radio Button Shortcuts

    // 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 TODO:
        } 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 TODO:

        } 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 TODO:

        } 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="javascript:Q0();">
    No <input class="N" name="Q0" id="Q0n" type="radio"  onchange="javascript: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="javascript:Q1();">
    No <input class="N" name="Q1" id="Q1n" type="radio"  onchange="javascript: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="javascript:Q2();">
    No <input class="N" name="Q2" id="Q2n" type="radio"  onchange="javascript: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="javascript:Q3();">
    Outward <input class="N" name="Q3" id="Q3n" type="radio"  onchange="javascript: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 you 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/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 you 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/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>

I really want to get the best from this community, responding to comments...

My original question was focused purely on the keyboard handler - I was asked for all the code and a demo.
After posting all the code it has been suggested that this is an XY problem - I was asked to reframe the question.

All I want to know is if a solution exists to change the default keyboard shortcuts for form/input actions, specifically:

Maintain TAB and Shift+TAB to move between input elements, but also use DownArrow and UpArrow to move between radio groups (not within radio groups - my radio buttons are horizontally oriented).
Maintain Space to check a radio button, but also use Enter to trigger identical functionality. I am not submitting the form, and I don't need Enter to do anything else.

Asking why five time - because the majority of my users are going to press Enter to select options and will get very confused when the arrow keys don't do what they expect.

Changing keyboard shortcuts is trivial in most environments - why so hard in HTML/JS?

Share Improve this question edited Feb 16 at 22:01 Heretic Monkey 12.1k7 gold badges61 silver badges131 bronze badges asked Feb 14 at 20:18 Gavin 4995 silver badges16 bronze badges

1 Many thanks, I have made grammatically correct questions, and discovered the snippet editor. As you can see I am not a software professional, the code is functional - but embarrassing. – Gavin Commented Feb 14 at 23:16
"On click --> do something." Thats the reason why youre getting negative responses. Just write code that approximates your goal? – wahwahwah Commented Feb 15 at 4:52
@wahwahwah: This code achieves my goal, and I haven't seen this done elsewhere. I am just asking for help to make it work with alternate keyboard shortcuts. – Gavin Commented Feb 15 at 8:53
This looks like an XY Problem The standard key commands should work fine for creating a "wizard" or walkthrough data entry form. Hitting "tab" should pop one over to the next form field... you shouldnt have to write explicit code for "tab" key press event in jquery. If you reframe the question you'll get more helpful responses. :) – wahwahwah Commented Feb 15 at 11:47
FYI: you do not need (and should remove) the javascript: scheme from the onchange handlers in your HTML. The only time javascript: is valid is when you add JavaScript functions to URLs in an anchor's href attribute, something which is inadvisable since they're in the onclick attribute (not to mention the preferred method of adding event handlers via JavaScript itself: in jQuery, $('input[name="Q0"]').on('change', Q0)) – Heretic Monkey Commented Feb 16 at 22:11

| Show 1 more comment

1 Answer 1

Sorted by: Reset to default 0

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/jquery-3.7.1.js"></script>
<!-- https://github/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/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/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.

科技改变生活-雨落星辰 - 所有的伟大,都源于一个勇敢的开始

javascript - How to change Enter, Up, and Down arrow key actions to use multiple radio groups? - Stack Overflow

1 Answer 1

与本文相关的文章

评论列表(0)