minor update to readme

resit-app/hangman/README.txt

@@ -16,3 +16,4 @@ Other notes
 You can only play the game as player 1 because, as yet, no login system has been implemented.
 It is supposed here that a login script would pass player_id to other views as a GET parameter.
 You don't *have* to do it like that...in fact, you're free to edit any of this application code as you see fit!
+*HOWEVER* it is probably not in your interests to edit hangman.js or hangman.css, since you aren't being credited for client-side scripting.

resit-app/hangman/css/hangman.css

+/* Source: https://jsfiddle.net/phollott/x29ym2ag/ */
+* {
+    box-sizing: border-box;
+}
+body {
+    font-family: sans-serif;
+}
+/* Keep it simple - improvement would be to not display characters */
+ .letter {
+    display: inline-block;
+    list-style: none;
+    width: 20px;
+    margin: 0 5px;
+    border-bottom: 1px solid black;
+    text-align: center;
+    color: white;
+}
+.current-word {
+    list-style: none;
+}
+.output {
+    opacity: 0;
+    transition: opacity 1s ease;
+}
+.correct {
+    background-color: green;
+    transition: all 1s ease;
+}
+.error {
+    color: red;
+    opacity: 1;
+}
+.warning {
+    color: orange;
+    opacity: 1;
+}
+.win {
+    color: green;
+    opacity: 1;
+}
+.hint {
+	font-style: italic;
+}

resit-app/hangman/js/hangman.js

+// Adapted from: https://jsfiddle.net/phollott/x29ym2ag/ 
+function playHangman(word, hint, player_id) {
+    "use strict";
+    var availableLetters, guessInput, guess, guessButton, hintButton, lettersGuessed, lettersMatched, output, man, letters, lives, currentWord, numLettersMatched, messages;
+
+	/* update the value of the player_id and word fields in the form */
+	document.getElementById("player_id").value = player_id;
+	document.getElementById("guessed_word").value = word;
+
+    function setup() {
+        /* start config options */
+        availableLetters = "abcdefghijklmnopqrstuvwxyz";
+        lives = 5;
+        currentWord = word.toLowerCase();
+        messages = {
+            win: 'You win!',
+            lose: 'Game over!',
+            guessed: ' already guessed, please try again...',
+            validLetter: 'Please enter a letter from A-Z',
+            hint: hint
+        };
+        /* end config options */
+
+        lettersGuessed = lettersMatched = '';
+        numLettersMatched = 0;
+
+        /* make #man and #output blank, create vars for later access */
+        output = document.getElementById("output");
+        man = document.getElementById("man");
+        guessInput = document.getElementById("letter");
+
+        man.innerHTML = 'You have ' + lives + ' lives remaining';
+        output.innerHTML = '';
+
+        document.getElementById("letter").value = '';
+
+		/* attach click behaviour to hint button */
+		document.getElementById("hint").onclick = function () {
+			document.getElementById("hintText").innerHTML = messages.hint;
+		}
+
+        /* make sure guess button is enabled */
+        guessButton = document.getElementById("guess");
+        guessInput.style.display = 'inline';
+        guessButton.style.display = 'inline';
+
+        /* set up display of letters in current word */
+        letters = document.getElementById("letters");
+        letters.innerHTML = '<li class="current-word">Current word:</li>';
+
+        var letter, i;
+        for (i = 0; i < currentWord.length; i++) {
+            letter = '<li class="letter letter' + currentWord.charAt(i).toUpperCase() + '">' + currentWord.charAt(i).toUpperCase() + '</li>';
+            letters.insertAdjacentHTML('beforeend', letter);
+        }
+    }
+
+    function gameOver(win) {
+        if (win) {
+            output.innerHTML = messages.win;
+            output.classList.add('win');
+			/* update the value of won field to true */
+			document.getElementById("won").value = "1";
+			/* submit form to database */ 
+			document.getElementById("hangman").submit(); 
+			
+        } else {
+            output.innerHTML = messages.lose;
+            output.classList.add('error');
+			/* submit form to database */ 
+			document.getElementById("hangman").submit(); 
+        }
+
+        guessInput.style.display = guessButton.style.display = 'none';
+        guessInput.value = '';
+    }
+
+    /* Start game */
+    setup();
+
+    /* reset letter to guess on click */
+    guessInput.onclick = function () {
+        this.value = '';
+    };
+
+    /* main guess function when user clicks #guess */
+    document.getElementById('hangman').onsubmit = function (e) {
+        if (e.preventDefault) e.preventDefault();
+        output.innerHTML = '';
+        output.classList.remove('error', 'warning');
+        guess = guessInput.value.toLowerCase();
+
+        /* does guess have a value? if yes continue, if no, error */
+        if (guess) {
+            /* is guess a valid letter? if so carry on, else error */
+            if (availableLetters.indexOf(guess) > -1) {
+                /* has it been guessed (missed or matched) already? if so, abandon & add notice */
+                if ((lettersMatched && lettersMatched.indexOf(guess) > -1) || (lettersGuessed && lettersGuessed.indexOf(guess) > -1)) {
+                    output.innerHTML = '"' + guess.toUpperCase() + '"' + messages.guessed;
+                    output.classList.add("warning");
+                }
+                /* does guess exist in current word? if so, add to letters already matched, if final letter added, game over with win message */
+                else if (currentWord.indexOf(guess) > -1) {
+                    var lettersToShow;
+                    lettersToShow = document.querySelectorAll(".letter" + guess.toUpperCase());
+
+                    for (var i = 0; i < lettersToShow.length; i++) {
+                        lettersToShow[i].classList.add("correct");
+                    }
+
+                    /* check to see if letter appears multiple times */
+                    for (var j = 0; j < currentWord.length; j++) {
+                        if (currentWord.charAt(j) === guess) {
+                            numLettersMatched += 1;
+                        }
+                    }
+
+                    lettersMatched += guess;
+                    if (numLettersMatched === currentWord.length) {
+                        gameOver(true);
+                    }
+                }
+                /* guess doesn't exist in current word and hasn't been guessed before, add to lettersGuessed, reduce lives & update user */
+                else {
+                    lettersGuessed += guess;
+                    lives--;
+                    man.innerHTML = 'You have ' + lives + ' lives remaining';
+                    if (lives === 0) gameOver();
+                }
+            }
+            /* not a valid letter, error */
+            else {
+                output.classList.add('error');
+                output.innerHTML = messages.validLetter;
+            }
+        }
+        /* no letter entered, error */
+        else {
+            output.classList.add('error');
+            output.innerHTML = messages.validLetter;
+        }
+        return false;
+    };
+};