Title: NHS number user interface
Tab size: 4
|    @collapse HTML files start in a standard way, which is hidden here @buttons
|    @end-collapse 
|    @collapse The HTML body
|    |    @collapse Main code, between <script>...</script>
|    |    |    @collapse Define possible separators
|    |    |    @end-collapse 
|    |    |    @collapse Function insertSeparators() inserts separators in the right places in the NHS number string
|    |    |    |    @collapse Check insertSeparators() works - try one test (I tried others but I've only hard-coded one in this code :-)
|    |    |    |    @end-collapse 
|    |    |    @end-collapse 
|    |    |    @collapse Function to generate warning sound
|    |    |    |    @collapse Lots of sound data to make a beepy sound
|    |    |    |    @end-collapse 
|    |    |    @end-collapse 
|    |    |    @collapse Function to check the checkdigit is correct
|    |    |    |    @collapse Check it works on my own NHS number
|    |    |    |    @end-collapse 
|    |    |    @end-collapse 
|    |    |    @collapse The user interface buffer
|    |    |    @end-collapse 
|    |    |    @collapse Function display() to display the buffer
|    |    |    @end-collapse 
|    |    |    @collapse Keystroke event listener to handle key input and update the display buffer
|    |    |    |    @collapse Handle digits 0-9
|    |    |    |    @end-collapse 
|    |    |    |    @collapse Change separator — handle space and dash separators
|    |    |    |    |    @collapse Handle anything else - it's an error
|    |    |    |    |    @end-collapse 
|    |    |    |    @end-collapse 
|    |    |    |    @collapse On iPads and iPhones there is some tedious work to make sure the keyboard is displayed when the user clicks in the input field (which has ID 'result')
|    |    |    |    @end-collapse 
|    |    |    @end-collapse 
|    |    |    @collapse NHS number user interface and explanations
|    |    |    |    @collapse The NHS number buffer, displayed in HTML
|    |    |    |    @end-collapse 
|    |    |    |    @collapse Display error messages, if any
|    |    |    |    @end-collapse 
|    |    |    @end-collapse 
|    |    |    @collapse Display the user interface buffer
|    |    |    @end-collapse 
|    |    |    @collapse Final instructions and useful links
|    |    |    @end-collapse 
|    |    @end-collapse 
|    |    @collapse Final bits to finish off the HTML file
|    |    @end-collapse 
|    |    @collapse <h2 style='color:red'>How does the documentation tool work?</h2>
|    |    @end-collapse 
|    @end-collapse