Algorithms to Coded Components

To illustrate "essential elements and features of programmed components and their relationships to the structure of the low-fidelity prototype digital solution":

Determining programming requirements using pseudocode:

GLOBAL VARIABLE puzzleWord

BEGIN caeserCipher(word, shift)
  cipherText = ""
  FOR character IN word
    number = ORD(character) - ORD("A")
    number = number + shift
    letter = CHR(number + ORD("A"))
    JOIN letter TO cipherText
  NEXT character
  ENDFOR
END

BEGIN randomWord()
  ARRAY words = ['cat','joe','lol','pie']
  n = RANDOM NUMBER BETWEEN 0 and LENGTH(words)
  RETURN words[n]
END

BEGIN check()
  INPUT guess
  IF guess == puzzleWord THEN
    OUTPUT "Correct"
  ELSE
    OUTPUT "Incorrect"
  ENDIF
END

BEGIN main
  WHILE True
    INPUT request
    IF request.url == "/" THEN
      puzzleWord = randomWord()
      OUTPUT caeserCipher( puzzleWord, +3 ) #obfuscate word
      RENDER webroot.html
    ENDIF
    IF request.url == "/check" AND request.method == "POST" THEN
      check()
      RENDER result.html
    ENDIF
  ENDWHILE
END

Generation using Python:

from flask import *
webapp = Flask(__name__)
puzzleWord = ""

def caeser(word, shift):
    cipherText = []
    plainText = list(word)
    for character in plainText:
        number = ord(character) - ord("A") #base26
        number = number + shift
        letter = chr(number + ord("A"))
        cipherText.append(letter)
    return "".join(cipherText)

import random
def randomWord():
    words = ["cat","joe","lol","pie"]
    return random.choice(words)

@webapp.route("/check", methods=["POST"])
def check():
    guess = request.form["guess"]
    if guess == puzzleWord:
        return "Correct"
    else:
        return "Incorrect"

@webapp.route("/")
def webroot():
    global puzzleWord
    puzzleWord = randomWord()
    return render_template("webroot.html", pw=caeser(puzzleWord,+3))

webapp.run(host="127.0.0.1", port=5000, debug=True)