diff --git a/.gitignore b/.gitignore
new file mode 100644
index 0000000..3409fdb
--- /dev/null
+++ b/.gitignore
@@ -0,0 +1,16 @@
+# Emacs
+*~
+.#*
+\#*\#
+TAGS
+
+# Mac
+.DS_Store
+
+# pytest
+__pycache__
+.pytest_cache
+
+# Ignore python local install build symlinks et al
+.venv
+poetry.lock
diff --git a/Makefile b/Makefile
new file mode 100644
index 0000000..fedf9ef
--- /dev/null
+++ b/Makefile
@@ -0,0 +1,38 @@
+# Ancient Makefile implicit rule disabler
+(%): %
+%:: %,v
+%:: RCS/%,v
+%:: s.%
+%:: SCCS/s.%
+%.out: %
+%.c: %.w %.ch
+%.tex: %.w %.ch
+%.mk:
+
+# Variables
+DOC_DIR     := docs
+SRC_DIR     := .
+TEST_DIR    := tests
+
+# Use colors for errors and warnings when in an interactive terminal
+INTERACTIVE := $(shell test -t 0 && echo 1)
+ifdef INTERACTIVE
+    RED	:= \033[0;31m
+    END	:= \033[0m
+else
+    RED	:=
+    END	:=
+endif
+
+# Let there be no default target
+.PHONY: default
+default:
+	@echo "${RED}There is no default make target.${END}  Specify one of:"
+	@echo "etags                   - constructs an emacs tags table"
+	@echo ""
+	@echo "See ${BUILD_DIR}/README.md for more details and info"
+
+# emacs tags (for javascript need GNU's universal-ctag package)
+.PHONY: etags
+etags:
+	/opt/homebrew/bin/ctags -e -R --language-force=javascript
diff --git a/docs/DesignNotes.md b/docs/DesignNotes.md
new file mode 100644
index 0000000..cf52a03
--- /dev/null
+++ b/docs/DesignNotes.md
@@ -0,0 +1,75 @@
+# VoteTracker+ Client Side UI/UX Design Notes
+
+## User Story 1 - landing page
+
+#### What happens when a client (smart device browser of choice) initially connects to the VTP demo?
+
+Displays a short welcome and help message that briefly explains the standard contest buttons.  There is only one active button on the page, __CONTINUE__.  Activating that continues to step 2.
+
+## User Story 2 - voting
+
+#### What happens when the voter starts to mark the ballot (votes)?
+
+Displays the first contest.  At the moment two types of contests are supported, plurality and IRV (RCV).
+
+If plurality:
+- can select up to the number of open positions by tapping the choice of interest in the vertical list
+- individual choices can be de-selected by tapping again
+- if more than the allowable number of choices are selected, a dialog abort window appears
+
+If IRV/RCV:
+- the vertical list of candidates is displayed below an (initially empty) vertical list of ranked/selected candidates above
+- clicking an candidate from the below list adds the candidate to the bottom of the upper list and removes the candidate from the below list
+- swiping a candidate left or right in the upper list will remove the candidate from the upper list and re-appear the candidate in the original order in the below list
+- the upper list is draggable - the upper list can be reordered at will
+
+Common buttons/actions/UI:
+
+- there is a __DE-SELECT ALL__ button somewhere in the lower left portion of the page
+- there is a __CONTINUE__ button somewhere in the lower right portion of the page
+  - if the continue button is activated and there is an undervote situation, a warning window appears that allows the user to go to the next contest or stay with the current contest
+- across the top is a horizontal progress bar divided into equal width sections by contest
+  - each contest is clickable and takes the user to that contest
+    - if there is an undervote in the current contest, a proceed-able warning window appears
+  - in the completion bar, completed contests are solid bright green, undervote contests are solid somewhat dimm yellow, and no-vote or undervote contests that are to the left of any green or yellow contest are red outlined boxes.
+- immediately below the progress bar in the left corner is a __PREVIOUS CONTEST__ button
+- immediately below the progress bar in the right corner is a __NEXT CONTEST__ button
+  - when the last contest in focus, the upper right button says __CHECKOUT__
+- when the __CHECKOUT__ box is clicked, all the contests are displayed with only two buttons: __GO BACK__ and __THIS IS MY VOTE__
+  - __GO BACK__ goes to the previous page with the checkout box in the upper right
+  - __THIS IS MY VOTE__ submits the ballot
+
+Note that the backend python server side will re-validate the incoming ballot CVR.  The __THIS IS MY VOTE__ entrypoint can return various errors to the user:
+
+- a non compliant contest selection was found
+- there was a problem on the server side
+
+If there is no error, the endpoint returns:
+
+- the voter's ballot check as if it were paper (no links) but with the QR code being a valid link (into the voter's backend server's still active git workspace)
+- the voter's row offset into the ballot check is temporarily displayed
+- in addition there is, for demo purposes only, two additional buttons on this page
+  - a __VERIFY BALLOT RECEIPT__ button
+  - a __TALLY CONTESTS__ button
+
+## User Story 3 - inspecting the ballot check/QR code
+
+#### What happens when the user clicks the QR code (or takes a photo of the QR code)?
+
+Displays the git repo copy of the contents of the ballot check.  All the digests are active links to the actual git digests for a specific vote for a specific contest.
+
+## User Story 4 - verifying the ballot check
+
+#### What happens when the user wants to verify their ballot check?
+
+The user clicks the __VERIFY BALLOT RECEIPT__ (end of User Story 1) and a new page displays the 'console log' output of that function with digests hyperlinked.  The output page contains a few by default blank fields that the user can optionally fill in.  One of them is a row offset.
+
+The page contains a __RE-VERIFY__ button that re-verifies the receipt honoring the new values in the various fields.
+
+## User Story 5 - tallying the election
+
+#### What happens when the user wants to tally the election?
+
+The user clicks the __TALLY CONTESTS__ button (end of User Story 1) and a new page displays the 'console log' output of that function with digests hyperlinked.  The output page contains a few by default blank fields that the user can optionally fill in.  One of them is a row offset.
+
+The page contains a __RE-TALLY CONTESTS__ button that re-tallies the election honoring the new values in the various fields.
diff --git a/docs/ProjectPlan.md b/docs/ProjectPlan.md
new file mode 100644
index 0000000..4380510
--- /dev/null
+++ b/docs/ProjectPlan.md
@@ -0,0 +1,74 @@
+# VoteTracker+ Client Side UI/UX Project Plan
+
+#### 1. Background
+
+The current design target is to create a usable client/voter frontend in a few weeks for a June 8th live demo.  The date and available skill level are driving the client UI side design and implementation.
+
+The current tech choice to achieve this is a plain html, css, and javascript implementation.  The current development  environment is Google's devtools, Microsoft's Visual Studio Code, and emacs :-).
+
+See the VoteTracker+ [project page](https://github.com/orgs/TrustTheVote-Project/projects/2/views/1) for status.
+
+#### 2. Overall VTP Git Repo Context
+
+Summary of the VTP git repo's:
+
+The [VTP-dev-end](https://github.com/TrustTheVote-Project/VTP-dev-env) holds/defines the development/run-time environment.  Contained within VTP-dev-end as submodules are three repos:
+- [VTP-mock-election.US.15](https://github.com/TrustTheVote-Project/VTP-mock-election.US.15) - contains the election configuration and data
+- [VTP-web-api](https://github.com/TrustTheVote-Project/VTP-web-api) - contains the FASTapi rest interface
+- [VoteTrackerPlus](https://github.com/TrustTheVote-Project/VoteTrackerPlus) - contains the python backend code
+
+This repo, [VTP-web-client](https://github.com/TrustTheVote-Project/VTP-web-client) contains the client frontend a.k.a. the voter's /UI/UX
+
+See [DesignNotes.md](DesignNotes.md) in this repo for details on the end user (voter) user stories 
+
+#### 3. Basic Project Plan
+
+The basic project plan is to stub out static versions of the various pages and write the javascript to support that.  Then incrementally add support for deeper integrations with the restful web-api.  The web-api hopefully will not require major work at this point.
+
+The four major milestones are:
+
+1. Create just the controls and UI without dealing with any JSON data - just get the basic html/css/JS UI controls for the five web pages (see below) working.
+
+2. Add JSON decoding support and integrate with static JSON data.  This includes reading and sending (static) JSON to a stubbed out backend.
+
+3. Plug in the web-api and use actual live JSON data from the web-api
+
+4. Full end-to-end testing of the demo
+
+#### 4. Timeline
+
+To achieve the demo all four of the above major milestones need to be completed by end of may.  Project completion means that the live demo is running without significant issues on a standalong router disconnected from any WAN.  Thus:
+
+- Completion of milestone 1: 02/21 (1 week)
+- Completion of milestone 2: 03/21 (4 weeks)
+- Completion of milestone 3: 04/17 (4 weeks)
+- Completion of milestone 4: 05/01 (2 weeks)
+
+which leaves 3 weeks of buffer
+
+#### 5. File layout (this git repo <-> end user web server)
+
+Given the decomposition into [5 user stories](./DesingNotes.md), out-of-the-gate associate different html pages with each user story.
+
+1. index.html
+ - the landing page
+ - one js button that jumps to the (next) voting.html page
+2. voting.html
+ - handles a single contest
+ - provides navigation to previous, next, other contests (same page), and to the checkout.html page
+ - provides progress status
+3. checkout.html
+ - allows the voter to double check their ballot prior to casting
+ - does not support editing the ballot
+ - provides three options: spoil ballot (exit), edit ballot (back to voting.html), and submit/cast ballot
+4. ballot check displaying
+ - either create the JS to retrieve the data from the web-api (new endpoint), creating an explicit ballot-check.html
+ - or standup a http server running somewhere that is pointing to the repo of interest for the demo.  This would probably require changing the upstream remote git repo URI to the demo LAN local git server, which would be ok as it would completely isolate the demo.
+5. verify-ballot-check.html
+ - handles the output of the ballot check function (basically console log output)
+ - supplies various end user functions associated with verify their ballot check - a UX TBD
+6. tally-election.html
+ - handles the output of tallying the election (basically console log output)
+- initial UX target is to supply a few buttons for enabling switches and converting digests to links (back to the local LAN git server or the upstream remote - see 3 above)
+
+Regarding css and javascript, created as needed in standard locations.
diff --git a/index.html b/index.html
new file mode 100644
index 0000000..21f81d6
--- /dev/null
+++ b/index.html
@@ -0,0 +1,33 @@
+<!DOCTYPE html>
+<html lang="en">
+    <head>
+        <meta charset="UTF-8">
+        <meta name="viewport" content="width=device-width, initial-scale=1.0">
+        <title>Landing Page - User Story 1</title>
+        <style>
+         /* box debugging
+          * {
+	    border-style: solid;
+	    border-color: red;
+            }
+          */
+        </style>
+    </head>
+    <body>
+        <h2>Welcome to a VoteTrackr+ Demo</h2>
+        <p>This is a simulated conceptual demo of what voting in an election that is
+            integrated with the VoteTrackr+ technology</p>
+        <p>You may vote as many times as you would like</p>
+        <p>Please click the continue button to start voting</p>
+        <p></p>
+        <p></p>
+        <p></p>
+        <button id="vote" >Vote</button>
+
+        <script>
+         document.getElementById("vote").onclick = function () {
+             window.location.href = "voting.html";
+         };
+        </script>
+    </body>
+</html>
diff --git a/javascript/blank-ballot.js b/javascript/blank-ballot.js
new file mode 100644
index 0000000..3e53dea
--- /dev/null
+++ b/javascript/blank-ballot.js
@@ -0,0 +1,127 @@
+const blankBallotJSON = `{
+    "active_ggos": [
+        ".",
+        "GGOs/states/Massachusetts",
+        "GGOs/states/Massachusetts/GGOs/counties/Middlesex",
+        "GGOs/states/Massachusetts/GGOs/towns/Concord"
+    ],
+    "ballot_filename": "000,001,002,003,ballot.json",
+    "ballot_node": "GGOs/states/Massachusetts/GGOs/towns/Concord",
+    "ballot_subdir": "GGOs/states/Massachusetts/GGOs/towns/Concord",
+    "contests": {
+        "GGOs/states/Massachusetts": [
+            {
+                "U.S. President": {
+                    "choices": [
+                        {
+                            "name": "Circle Party Ticket",
+                            "ticket_names": [
+                                "Rey Skywalker",
+                                "Obi-Wan Kenobi"
+                            ]
+                        },
+                        {
+                            "name": "Square Party Ticket",
+                            "ticket_names": [
+                                "Atticus Finch",
+                                "Hermione Granger"
+                            ]
+                        },
+                        {
+                            "name": "Triangle Party Ticket",
+                            "ticket_names": [
+                                "Evelyn Quan Wang",
+                                "Waymond Wang"
+                            ]
+                        }
+                    ],
+                    "contest_type": "ticket",
+                    "max": 1,
+                    "tally": "plurality",
+                    "ticket_offices": [
+                        "President",
+                        "Vice President"
+                    ],
+                    "uid": "0000"
+                }
+            },
+            {
+                "U.S. Senate": {
+                    "choices": [
+                        {
+                            "name": "Anthony Alpha",
+                            "party": "Circle Party"
+                        },
+                        {
+                            "name": "Betty Beta",
+                            "party": "Dyad Party"
+                        },
+                        {
+                            "name": "Gloria Gamma",
+                            "party": "Triangle Party"
+                        },
+                        {
+                            "name": "David Delta",
+                            "party": "Square Party"
+                        },
+                        {
+                            "name": "Emily Echo",
+                            "party": "Pentagon Party"
+                        },
+                        {
+                            "name": "Francis Foxtrot",
+                            "party": "Hexagon Party"
+                        }
+                    ],
+                    "tally": "rcv",
+                    "uid": "0001"
+                }
+            },
+            {
+                "Governor": {
+                    "choices": [
+                        {
+                            "name": "Spencer Cogswell",
+                            "party": "Circle Party"
+                        },
+                        {
+                            "name": "Cosmo Spacely",
+                            "party": "Triangle Party"
+                        }
+                    ],
+                    "max": 1,
+                    "tally": "plurality",
+                    "uid": "0002"
+                }
+            }
+        ],
+        "GGOs/states/Massachusetts/GGOs/counties/Middlesex": [
+            {
+                "County Clerk": {
+                    "choices": [
+                        "Jean-Luc Picard",
+                        "Katniss Everdeen",
+                        "James T. Kirk"
+                    ],
+                    "max": 1,
+                    "tally": "plurality",
+                    "uid": "0003"
+                }
+            }
+        ],
+        "GGOs/states/Massachusetts/GGOs/towns/Concord": [
+            {
+                "Question 1 - should the starting time of the annual town meeting be moved to 6:30 PM?": {
+                    "choices": [
+                        "yes",
+                        "no"
+                    ],
+                    "description": "Should the Town of Concord start the annual Town Meeting at 6:30 PM instead of 7:00 PM?",
+                    "max": 1,
+                    "tally": "plurality",
+                    "uid": "0004"
+                }
+            }
+        ]
+    }
+}`;
diff --git a/stylesheets/voting.css b/stylesheets/voting.css
new file mode 100644
index 0000000..e0d9971
--- /dev/null
+++ b/stylesheets/voting.css
@@ -0,0 +1,110 @@
+/* Set the overall styles for the progress bar */
+#progressBar {
+    display: flex;
+    height: 20px;
+    width: 100%;
+    text-align: center;
+    background-color: #E5E4E2;
+}
+#youAreHereBar {
+    display: flex;
+    height: 20px;
+    width: 100%;
+    text-align: center;
+}
+
+/* colors for completely voted and undervoted and novoted */
+.novotedText {
+    color: #FF6B6B;
+}
+.undervotedText {
+    color: #FFD166;
+}
+.votedText {
+    color: #6EE7B7;
+}
+.novotedBG {
+    background-color: #FF6B6B;
+}
+.undervotedBG {
+    background-color: #FFD166;
+}
+.votedBG {
+    background-color: #6EE7B7;
+}
+.activeContest {
+    background-color: white;
+}
+
+/* Each section (class) gets an individual black border */
+.progSection {
+    flex: 1; /* Equal distribution of space */
+    border-right: 1px solid black;
+}
+.yrhSection {
+    flex: 1; /* Equal distribution of space */
+}
+
+/* when a plurality candidate is selected or not */
+.selected {
+    background-color: #D5F5E3;
+}
+.unselected {
+    background-color: #f5f5f5;
+}
+
+/* the incoming choices */
+#choiceList li {
+    margin: 10px;
+    padding: 15px;
+    border: 1px solid #dfdfdf;
+    list-style-type: none;
+}
+
+/* in RCV the selection is a sortable list - the defaults */
+#sortableList {
+    list-style: none;
+    padding: 0;
+    margin: 0;
+}
+
+#sortableList li {
+    margin: 10px;
+    padding: 15px;
+    border: 1px solid #dfdfdf;
+    background: #f5f5f5;
+}
+
+#sortableList li.hint {
+    border: 1px solid #ffc49a;
+    background: #feffb4;
+}
+
+#sortableList li.active {
+    border: 1px solid #ffa5a5;
+    background: #ffe7e7;
+}
+
+/* bottom section */
+.noBullets {
+    list-style-type: none;
+}
+
+/* flexbox for the checkout page selection box */
+.selectionFlexContainer {
+    display: flex;
+}
+.tableStyle {
+    padding: 0;
+    margin: 0;
+}
+
+/* For JSON pretty printing */
+pre {outline: 1px solid #ccc; padding: 5px; margin: 5px; }
+.JSONstring { color: green; }
+.JSONnumber { color: darkorange; }
+.JSONboolean { color: blue; }
+.JSONnull { color: magenta; }
+.JSONkey { color: red; }
+
+</style>
diff --git a/voting.html b/voting.html
new file mode 100644
index 0000000..e776235
--- /dev/null
+++ b/voting.html
@@ -0,0 +1,851 @@
+<!DOCTYPE html>
+<html lang="en">
+    <head>
+        <meta charset="UTF-8">
+        <meta name="viewport" content="width=device-width, initial-scale=1.0">
+        <link rel="stylesheet" href="stylesheets/voting.css">
+        <script src="javascript/blank-ballot.js"></script>
+        <title>Voting - User Story 2</title>
+        <style>
+        /* box debugging
+         * {
+	   border-style: solid;
+	   border-color: red;
+           }
+         */
+        </style>
+    </head>
+    <body>
+        <!--
+             Note - each contest is effectively a separate page.  The contest next button (there
+             are several ways to get to the next, previous, or random other contest) resets
+             the two lists to the current state of the (new) contest.
+
+             Note that contests can be in one of three states: un-voted, undervoted, or
+             voted.  The progress bar is divided into the contest number of sections, each
+             section from left to rigth representing a contest.  The coloring is as follows:
+
+             green     -> voted (completed)
+             yellow    -> undervoted
+             red       -> there are two cases when a progress bar section is red: a) when the
+                          contest is unvoted when there is a yellow or green contest to the
+                          right, or b) when the voter is on the checkout/cast-vote final page
+             uncolored -> unvoted when there are no yellows/greens to the right and when the
+                          voter is not on the final checkout/cast page
+
+             For now, just stub out five contests and pretend this is the first one being
+             being revisted after skipping the first two and completing the third one
+        -->
+        <div id="progressBar"></div>
+        <div id="youAreHereBar"></div>
+
+        <!-- The upper span starts here
+             Note - when exiting a contest page, all child nodes of upperSection
+             will be wiped out.
+        -->
+        <div id="upperSection"></div>
+
+        <!-- The lower span start here.
+             Note - when exiting a contest page, all child nodes of lowerSection
+             will be wiped out.
+        -->
+        <div id="lowerSection"></div>
+
+        <!-- The bottom span start here.
+             Nominally this is where the bottom buttons gp
+        -->
+        <div id="bottomSection"></div>
+
+        <!-- -->
+        <!-- html ends, javascript starts -->
+        <!-- -->
+        <script>
+
+        // Need the JSON data for just about everything
+        // Create the blankBallot javascript object from the blankBallotJSON JSON object literal
+        var blankBallot = null;
+        try {
+            blankBallot = JSON.parse(blankBallotJSON);
+        } catch (e) {
+            console.error(e);
+        }
+
+        // Note - for the moment let these be globals (until we know more).
+        // Regardless, the upper/lower setup will make sure choiceList and
+        // sortableList are already defined.
+        var choiceList = null;
+        var sortableList = null;
+        var removeButtons = null;
+        // Don't know how to implement a closure or equivilent yet
+        var selectedCount = 0;
+
+        // Odds and ends
+        const selectBackgroundColor = "#f5f5f5";
+        const extraSpace = "&nbsp&nbsp";
+
+        // Get the number of contests which is actually ordered/subdivided by GGO
+        const listOfContests = [];
+        function _initialize() {
+            let count = 0;
+            for (const ggo of blankBallot.active_ggos) {
+                if (blankBallot.contests[ggo]) {
+                    for (const contest of blankBallot.contests[ggo]) {
+                        listOfContests[count] = contest;
+                        count += 1;
+                    }
+                }
+            }
+            return count;
+        }
+        const numberOfContests = _initialize();
+        console.log("there are " + numberOfContests + " contest(s)");
+
+        // Define a YouAreThere inline glyph
+        const yrhIcon = document.createElementNS("http://www.w3.org/2000/svg", "svg");
+        yrhIcon.setAttribute("width", "20");
+        yrhIcon.setAttribute("height", "20");
+        yrhIcon.setAttribute("viewBox", "0 0 32 32");
+        yrhIcon.setAttribute("fill", "currentColor");
+        yrhIcon.setAttribute("color", "black");
+        yrhIcon.innerHTML = `<path d="M26.221 16c0-7.243-5.871-13.113-13.113-13.113s-13.113 5.87-13.113 13.113c0 7.242 5.871 13.113 13.113 13.113s13.113-5.871 13.113-13.113zM1.045 16c0-6.652 5.412-12.064 12.064-12.064s12.064 5.412 12.064 12.064c0 6.652-5.411 12.064-12.064 12.064-6.652 0-12.064-5.412-12.064-12.064z"></path><path d="M18.746 15.204l0.742-0.742-6.379-6.379-6.378 6.379 0.742 0.742 5.112-5.112v12.727h1.049v-12.727z"></path>`;
+
+        // Will set up the progress bars with numberOfContests contests
+        // NOTE - the printed/user-visible contest numbers are 1 based while
+        // everything else (the backend, internal, etc) is 0 based.
+        function setupProgressBars(numberOfContests) {
+            const progBarElement = document.getElementById("progressBar");
+            const yrhBarElement = document.getElementById("youAreHereBar");
+            for (let index = 0; index < numberOfContests; index++) {
+                const id = index + 1;
+                // progress bar
+                const newBarElement = document.createElement("div");
+                newBarElement.setAttribute("class", "progSection");
+                newBarElement.setAttribute("id", "progBar" + index);
+                // Add navigation button with the contest id as the button
+                // string ZZZ
+                newBarElement.innerHTML = id;
+                progBarElement.appendChild(newBarElement);
+                // youAreHereBar bar
+                const newYrhElement = document.createElement("div");
+                newYrhElement.setAttribute("class", "yrhSection");
+                newYrhElement.setAttribute("id", "yrhBar" + index);
+                yrhBarElement.appendChild(newYrhElement);
+            }
+            // Add a final checkout section
+            const newBarElement = document.createElement("div");
+            // Note - the last progress bar section wants to the same class
+            // as the other so not to have any borders
+            newBarElement.setAttribute("class", "yrhSection");
+            newBarElement.setAttribute("id", "progBar" + numberOfContests);
+            newBarElement.innerHTML = "checkout";
+            progBarElement.appendChild(newBarElement);
+            const newYrhElement = document.createElement("div");
+            newYrhElement.setAttribute("class", "yrhSection");
+            newYrhElement.setAttribute("id", "yrhBar" + numberOfContests);
+            yrhBarElement.appendChild(newYrhElement);
+        }
+
+        // Will set the color of the progress bar (per contest)
+        // NOTE - contestNum is zero based
+        function setProgressBarColor(contestNum, color) {
+            const sectionElement = document.getElementById("progBar" + contestNum);
+            // Need to clear out all existing background styles
+            for (const color of ["novotedBG", "undervotedBG", "votedBG", "activeContest"]) {
+                sectionElement.classList.remove(color)
+            }
+            sectionElement.classList.add(color);
+        }
+
+        // Will set the contents of the youAreHereBar bar (per contest)
+        // NOTE - contestNum is zero based
+        function setActiveContest(contestNum) {
+            const sectionElement = document.getElementById("yrhBar" + contestNum);
+            const newElement = document.createElement("span");
+            newElement.appendChild(yrhIcon);
+            sectionElement.appendChild(newElement);
+        }
+
+        // Will set up the upperSection
+        function setUpperSection(contestNum, thisContestName, thisContestValue, checkout=false) {
+            const rootElement = document.getElementById("upperSection");
+            const newItem = document.createElement("span");
+            if (checkout) {
+                // Setup the checkout page
+                let innerText = `<h2>Ballot Checkout</h2><ul>
+<li>Verify that each contest is how you would like to vote.</li>
+<li>You can select the edit button next to any contest re-edit your selection</li>
+<li>Clicking the <b>VOTE</b> button at the bottom of the page will cast your ballot</li>
+<li>When you cast your ballot, you will receive an anonymous ballot receipt with 100 randomized contest checks</li>
+<li>If you click <b>VOTE and reveal row</b>, in addition to the ballot receipt, you will momentarily be shown your private row number.
+<li>Though the ballot receipt is public, the row number is private.  Revealing your row number AND your ballot receipt will allow others to see how you voted.</li></ul>`;
+                newItem.innerHTML = innerText;
+            } else if (thisContestValue.tally == "plurality") {
+                const max = thisContestValue.max;
+                // Setup plurality contest header info
+                let innerText = "<h2>Contest " + (contestNum + 1) + ":&nbsp&nbsp&nbsp" + thisContestName + "</h2><h3>This is a plurality contest:</h3><ul><li>Make you selection by clicking.  Click again to unselect.</li>";
+                if (max == 1) {
+                    innerText += "<li>You can only make one selection</li></ul>";
+                } else {
+                    innerText += "<li>You can choose upto " + max + "</li></ul>";
+                }
+                newItem.innerHTML = innerText;
+            } else {
+                // Setup IRV contest header info
+                let innerStr = "";
+                if (!thisContestValue.choices.length) {
+                    innerStr = "You can select up to all the candidates";
+                } else {
+                    innerStr = "You can select up to " + thisContestValue.choices.length + "candidates";
+                }
+                let innerText = "<h2>Contest " + (contestNum + 1) + ":&nbsp&nbsp&nbsp" + thisContestName + `</h2><h3>This is a RCV contest:</h3>
+<ul>
+<li>Clicking a candidate will add it in order to your RCV</li>
+<li>Your RCV selection is re-orderable by drag-and-drop the selections</li>
+<li>Clicking a selection's remove button deselects a candidate</li>
+<li>` + innerStr + `</li>
+</ul>
+<h3>Your RCV selection:</h3>
+        `;
+                newItem.innerHTML = innerText;
+            }
+            const newList = document.createElement("ul");
+            newList.setAttribute("id", "sortableList");
+            newList.classList.add("noBullets");
+            newItem.appendChild(newList);
+            rootElement.appendChild(newItem);
+        }
+
+        // Will set up the lowerSection
+        function setLowerSection(thisContestValue, checkout=false) {
+            const rootElement = document.getElementById("lowerSection");
+            const newItem = document.createElement("span");
+            if (checkout) {
+                newItem.innerHTML = "";
+            } else if (thisContestValue.contest_type == "ticket") {
+                newItem.innerHTML = "<h3>Candidates:</h3>";
+            } else if (thisContestValue.contest_type == "question") {
+                newItem.innerHTML = "<h3>Your selection:</h3>";
+            } else {
+                newItem.innerHTML = "<h3>Candidates:</h3>";
+            }
+            const newList = document.createElement("ul");
+            newList.setAttribute("id", "choiceList");
+            newList.classList.add("noBullets");
+            newItem.appendChild(newList);
+            rootElement.appendChild(newItem);
+        }
+
+        // Setup the choiceList
+        function setupChoiceList(thisContestName, thisContestValue, overrideChoice=null) {
+            const rootElement = document.getElementById("choiceList");
+            for (let choice of thisContestValue.choices) {
+                if (overrideChoice) {
+                    choice = overrideChoice;
+                }
+                const newItem = document.createElement("li");
+                newItem.classList.add("flex-item"); // Apply a class for styling
+
+                // Create a selection glyph
+                const svgIcon = document.createElementNS("http://www.w3.org/2000/svg", "svg");
+                svgIcon.setAttribute("width", "16");
+                svgIcon.setAttribute("height", "16");
+                svgIcon.setAttribute("viewBox", "0 0 16 16");
+                svgIcon.setAttribute("fill", selectBackgroundColor);
+                svgIcon.innerHTML = '<circle r=6 cx=8 cy=8 stroke="black" stroke-width="1"/>';
+
+                // Create the text element
+                const name = document.createElement("span");
+                const extraText = document.createElement("span");
+                name.innerHTML = extraSpace;
+                // Ugh - need to inspect for the choices data type
+                if (choice.name) {
+                    name.innerText += choice.name;
+                    newItem.setAttribute("thename", choice.name);
+                } else {
+                    // Just an array of strings
+                    name.innerText +=  choice;
+                    newItem.setAttribute("thename", choice);
+                }
+                if (thisContestValue.contest_type == "ticket") {
+                    // Note - need to add this as an additional flex-box
+                    // so that the 'name' matches the choice
+                    let addendum = [];
+                    for (let office of thisContestValue.ticket_offices) {
+                        addendum.push(office + ":" + choice.ticket_names);
+                    }
+                    extraText.innerHTML = extraSpace;
+                    extraText.innerText += "[" + addendum.join(", ") + "]";
+                }
+                // Add the unselected class
+                newItem.classList.add("unselected");
+
+                // Append everything ...
+                newItem.appendChild(svgIcon);
+                newItem.appendChild(name);
+                newItem.appendChild(extraText);
+                rootElement.appendChild(newItem);
+
+                // If setting just one choice
+                if (overrideChoice) {
+                    break;
+                }
+            }
+        }
+
+        // Make the RCV selection sortable by drag-and-drop
+        // Note - the class is on the li node
+        function initSortableList(target) {
+            target.classList.add("slist");
+            const items = target.getElementsByTagName("li");
+            let current = null;
+
+            for (let i of items) {
+                i.draggable = true;
+
+                i.ondragstart = (e) => {
+                    current = i;
+                    for (let it of items) {
+                        if (it != current) {
+                            it.classList.add("hint");
+                        }
+                    }
+                };
+
+                i.ondragenter = (e) => {
+                    if (i != current) {
+                        i.classList.add("active");
+                    }
+                };
+
+                i.ondragleave = (e) => {
+                    i.classList.remove("active");
+                };
+
+                i.ondragend = (e) => {
+                    for (let it of items) {
+                        it.classList.remove("hint");
+                        it.classList.remove("active");
+                    }
+                };
+
+                i.ondragover = (e) => e.preventDefault();
+
+                i.ondrop = (e) => {
+                    if (i != current) {
+                        let currentPos = 0;
+                        let droppedPos = 0;
+
+                        for (let it = 0; it < items.length; it++) {
+                            if (current == items[it]) {
+                                currentPos = it;
+                            }
+                            if (i == items[it]) {
+                                droppedPos = it;
+                            }
+                        }
+
+                        if (currentPos < droppedPos) {
+                            i.parentNode.insertBefore(current, i.nextSibling);
+                        } else {
+                            i.parentNode.insertBefore(current, i);
+                        }
+                    }
+                };
+            }
+        }
+
+        // The RCV heavy lifter
+        function updateRCVContest(selectedItem, thisContestName, thisContestValue) {
+            // Create a new selected item with a remove button
+            const selectedText = selectedItem.textContent;
+            const newItem = document.createElement("li");
+            newItem.classList.add("flex-item"); // Apply a class for styling
+
+            // Create a remove button
+            const newButton = document.createElement("button");
+            newButton.innerText = "remove";
+            newButton.classList.add("remove");
+            // add an event listener to the button
+            newButton.addEventListener("click", function (e) {
+                let itemName = e.target.parentNode.textContent.trim().replace(/\s+remove$/, "");
+                e.target.parentNode.classList.remove("selected");
+                console.log("Remove button eventListener: removing '" + itemName + "' (parentNode=" + e.target.parentNode.innerText + ")");
+                // remove it from sortableList
+                e.target.parentNode.remove();
+                // add to choiceList
+                setupChoiceList(thisContestName, thisContestValue, itemName);
+            });
+
+            // Create a re-order glyph
+            const svgIcon = document.createElementNS("http://www.w3.org/2000/svg", "svg");
+            svgIcon.setAttribute("width", "20");
+            svgIcon.setAttribute("height", "20");
+            svgIcon.setAttribute("viewBox", "0 -4 16 16");
+            // svgIcon.setAttribute("preserveAspectRatio", "xMidYMid meet");
+            svgIcon.setAttribute("fill", "currentColor");
+            svgIcon.setAttribute("fill-rule", "evenodd");
+            svgIcon.setAttribute("clip-rule", "evenodd");
+            // the actual svg
+            svgIcon.innerHTML = `<path d="M2.49998 4.09998C2.27906 4.09998 2.09998 4.27906 2.09998 4.49998C2.09998 4.72089 2.27906 4.89998 2.49998 4.89998H12.5C12.7209 4.89998 12.9 4.72089 12.9 4.49998C12.9 4.27906 12.7209 4.09998 12.5 4.09998H2.49998ZM2.49998 6.09998C2.27906 6.09998 2.09998 6.27906 2.09998 6.49998C2.09998 6.72089 2.27906 6.89998 2.49998 6.89998H12.5C12.7209 6.89998 12.9 6.72089 12.9 6.49998C12.9 6.27906 12.7209 6.09998 12.5 6.09998H2.49998ZM2.09998 8.49998C2.09998 8.27906 2.27906 8.09998 2.49998 8.09998H12.5C12.7209 8.09998 12.9 8.27906 12.9 8.49998C12.9 8.72089 12.7209 8.89998 12.5 8.89998H2.49998C2.27906 8.89998 2.09998 8.72089 2.09998 8.49998ZM2.49998 10.1C2.27906 10.1 2.09998 10.2791 2.09998 10.5C2.09998 10.7209 2.27906 10.9 2.49998 10.9H12.5C12.7209 10.9 12.9 10.7209 12.9 10.5C12.9 10.2791 12.7209 10.1 12.5 10.1H2.49998Z"/>`;
+
+            // Create the text element
+            const textElement = document.createElement("span");
+            textElement.innerText = selectedText;
+            textElement.innerHTML += extraSpace;
+
+            // Append everything to the li node
+            newItem.appendChild(svgIcon);
+            newItem.appendChild(textElement);
+            newItem.appendChild(newButton);
+
+            // Add the class to the li node
+            newItem.classList.add("selected");
+            // ... and append that to the bottom of sortableList
+            sortableList.appendChild(newItem);
+            // Remove the containing li for the selected item from the first list
+            selectedItem.remove();
+            // Initialize the sortable list
+            initSortableList(document.getElementById("sortableList"));
+        }
+
+        // RCV event listeners
+        function setupRCVEventListeners(thisContestName, thisContestValue) {
+            // Event listener for selection in the first list (when a candidate is selected)
+            choiceList.addEventListener("click", (event) => {
+                if (event.target.closest("li") && event.target.closest("li").classList.contains("unselected")) {
+                    console.log("Running RCV eventListener:");
+                    // Update the RCV contest
+                    updateRCVContest(event.target.closest("li"), thisContestName, thisContestValue);
+                }
+            });
+        }
+
+        // plurality contest choice (li item) event listeners
+        function setupPluralityEventListeners(thisContestName, thisContestValue) {
+            choiceList.addEventListener("click", (event) => {
+                console.log("Running plurality eventListener:");
+                // Note - one can (correctly) select the circle, or svg, or text,
+                // or the li
+                const listItem = event.target.closest("li");
+                const itemText = listItem.textContent;
+                const itemIndex = Array.from(choiceList.children).indexOf(listItem);
+                if (listItem.classList.contains("unselected")) {
+                    if (selectedCount < thisContestValue.max) {
+                        // Select the item (up to maxSelection selections allowed)
+                        listItem.classList.add("selected");
+                        listItem.classList.remove("unselected");
+                        // get the svg (first child) and set fill to on (black)
+                        listItem.firstElementChild.style.fill = "black"
+                        selectedCount++;
+                        console.log("selected " + itemIndex + ", " + itemText);
+                    } else {
+                        // Overvote
+                        console.log("rejected (overvote) - ignoring " + itemIndex + ", " + itemText);
+                    }
+                } else if (listItem.classList.contains("selected")) {
+                    // Deselect the item
+                    listItem.classList.add("unselected");
+                    listItem.classList.remove("selected");
+                    listItem.firstElementChild.style.fill = selectBackgroundColor;
+                    selectedCount--;
+                    // get the svg (first child) and set fill to off
+                    console.log("de-selected " + itemIndex + ", " + itemText);
+                }
+            });
+        }
+
+        // the next/checkout button listener.
+        // Note - it is the newButton EventListener defined and attached here
+        // that records the vote in the blankBallot object AND clears out the
+        // three DOM sections.  So when the newButton EventListener calls
+        // either setupNextContest or setupCheckout, the three DOM sections
+        // have been cleared out and are ready to be re-populated.
+        function setupNavigationButtonListener(buttonString, thisContestNum, thisContestValue, nextContestNum) {
+            const newItem = document.createElement("li");
+            // Create a next/checkout button
+            const newButton = document.createElement("button");
+            newButton.innerText = buttonString;
+            // add an event listener to the button
+            newButton.addEventListener("click", function (e) {
+                console.log("Running NextButton '" + buttonString + "' eventListener for contest " + nextContestNum);
+                // On the button click go to the next contest or the checkout screen
+                //
+                // Going to the next contest involves:
+                // 1) capturing the vote (a.k.a. thisContest's selections) before it
+                //    (probably?) gets wiped out when the DOM children are reaped.
+                //    thisContestValue is a reference into the blankBallot object.
+                if (thisContestValue) {
+                    const selection = [];
+                    let index = 0;
+                    for (const choice of document.getElementsByClassName("selected")) {
+                        const name = choice.children[1].innerText.trim();
+                        selection[index] = index + ": " + name;
+                        console.log("recording vote: " + index + ": " + name);
+                        index += 1;
+                    }
+                    thisContestValue["selection"] = selection;
+                    // and setting the progressBar color
+                    let max = thisContestValue.max;
+                    if (!max) {
+                        max = thisContestValue.choices.length;
+                    }
+                    console.log("");
+                    if (selection.length == 0) {
+                        console.log("Contest " + thisContestNum + " no voted");
+                        setProgressBarColor(thisContestNum, "novotedBG");
+                    } else if (max == selection.length) {
+                        console.log("Contest " + thisContestNum + " voted");
+                        setProgressBarColor(thisContestNum, "votedBG");
+                    } else {
+                        console.log("Contest " + thisContestNum + " undervoted voted");
+                        setProgressBarColor(thisContestNum, "undervotedBG");
+                    }
+                }
+                // 2) clearing out the upper and lower node DOM trees
+                document.getElementById("upperSection").replaceChildren();
+                document.getElementById("lowerSection").replaceChildren();
+                document.getElementById("bottomSection").replaceChildren();
+                // 3) Going somewhere
+                if (nextContestNum < numberOfContests) {
+                    setupNewContest(nextContestNum);
+                } else {
+                    setupCheckout();
+                }
+            });
+            return newButton;
+        }
+
+        // Setup the bottom navigation buttons
+        function setupBottomNavigation(thisContestNum, nextContestNum, thisContestValue) {
+            const bottomElement = document.getElementById("bottomSection");
+            const newList = document.createElement("ul");
+            newList.classList.add("flex-item"); // Apply a class for styling
+            newList.classList.add("noBullets");
+            // For now, always create two buttons (UX TBD later)
+            let nextButtonString = "Go to next contest";
+            let prevContestNum = thisContestNum - 1;
+            if (nextContestNum >= numberOfContests) {
+                nextButtonString = "Go to checkout";
+            }
+            let previousButtonString = "Go to previous contest";
+            if (thisContestNum == 0) {
+                previousButtonString = "Go directly to checkout";
+                prevContestNum = numberOfContests + 1;
+            }
+            // Add the buttons as a table
+            const table = document.createElement("table");
+            table.classList.add("tableStyle");
+            const row = document.createElement("tr");
+            const col1 = document.createElement("td");
+            const col2 = document.createElement("td");
+            col1.appendChild(setupNavigationButtonListener(previousButtonString, thisContestNum, thisContestValue, prevContestNum));
+            col2.innerHTML = "&nbsp&nbsp";
+            col2.appendChild(setupNavigationButtonListener(nextButtonString, thisContestNum, thisContestValue, nextContestNum));
+            row.appendChild(col1);
+            row.appendChild(col2);
+            table.appendChild(row);
+            // Add to the DOM
+            bottomElement.appendChild(table);
+        }
+
+        // Helper function to color JSON
+        function syntaxHighlight(jsonString) {
+            let newString = jsonString.replace(/&/g, '&amp;').replace(/</g, '&lt;').replace(/>/g, '&gt;');
+            newString = jsonString.replace(/("(\\u[a-zA-Z0-9]{4}|\\[^u]|[^\\"])*"(\s*:)?|\b(true|false|null)\b|-?\d+(?:\.\d*)?(?:[eE][+\-]?\d+)?)/g, function (match) {
+                var cls = 'JSONnumber';
+                if (/^"/.test(match)) {
+                    if (/:$/.test(match)) {
+                        cls = 'JSONkey';
+                    } else {
+                        cls = 'JSONstring';
+                    }
+                } else if (/true|false/.test(match)) {
+                    cls = 'JSONboolean';
+                } else if (/null/.test(match)) {
+                    cls = 'JSONnull';
+                }
+                return '<span class="' + cls + '">' + match + '</span>';
+            });
+            return newString;
+        }
+
+        function nullifySession() {
+            blankBallot = null;
+            listOfContests.length = 0;
+        }
+
+        // Setup the chechout page vote button
+        function setupVoteButtonListener(buttonString, rootElement) {
+            const newItem = document.createElement("div");
+            // Create a next/checkout button
+            const newButton = document.createElement("button");
+            newButton.innerText = buttonString;
+            // add an event listener to the button
+            newButton.addEventListener("click", function (e) {
+                console.log("Running '" + buttonString + "' eventListener");
+                if (buttonString == "VOTE") {
+                    // Send the blankBallot object to the web-api endpoint.
+                    // ZZZ
+                    // For now, just print it to the page
+                    let jsonString = JSON.stringify(blankBallot, undefined, 2);
+                    rootElement.appendChild(document.createElement('pre')).innerHTML = syntaxHighlight(jsonString);
+                    // ZZZ for the demo, destroy the blankBallot as well
+                    nullifySession();
+                } else if (buttonString == "Spoil Ballot") {
+                    // For now, just print something, destroy the blankBallot,
+                    // and go to home page
+                    nullifySession();
+                    const newItem = document.createElement("p");
+                    newItem.innerHTML = "Your ballot has been destroyed.  To vote, click the start over button below";
+                    rootElement.appendChild(newItem);
+                    // window.location.href = "voting.html";
+                    const startOverButton = document.createElement("button");
+                    startOverButton.innerText = "Start over";
+                    startOverButton.onclick = function () {
+                        window.location.href = "index.html";
+                    };
+                    rootElement.appendChild(startOverButton);
+                } else {
+                    alert("Unsupported/unimplemented function '" + buttonString + "'");
+                }
+            });
+            return newButton;
+        }
+
+        // Setup the progressBar navigation buttons.  Design note - as the
+        // design of this fell into place (!), the code to store the voter's
+        // selection ended up being placed in the event listener that
+        // navigated away from the page (setupNavigationButtonListener).  That
+        // creates a closure for the actual event listener.  Sooo, when adding
+        // event listeners to the progressBar, the same thing needs to be done,
+        // which means for the moment (without a class structure design etc)
+        // each contest page needs to redefine the even listener so to have
+        // the correct closure so that it (the navigation away) does the
+        // correct thing (as the closure contains the thisContestNum value).
+        function setupProgressBarNavigation(thisContestNum, thisContestValue) {
+            // loop over the entire progressBar and replace the event listeners
+            for (let index = 0; index < numberOfContests; index++) {
+                const id = "progBar" + index;
+                const barElement = document.getElementById(id);
+                // remove anything that exists
+                barElement.replaceChildren();
+                // add new button
+                const barButton = setupNavigationButtonListener(index+1, thisContestNum, thisContestValue, index);
+                barElement.appendChild(barButton)
+            }
+            // And add one for the checkout page
+            const barElement = document.getElementById("progBar" + numberOfContests);
+            // remove anything that exists
+            barElement.replaceChildren();
+            // add new button
+            const barButton = setupNavigationButtonListener("checkout", thisContestNum, thisContestValue, numberOfContests);
+            barElement.appendChild(barButton)
+        }
+
+        // Helper function for pretty printing selections
+        function smartenSelections(selections, tally) {
+            const arr = [...selections];
+            if (tally == "plurality") {
+                return arr.map((str) => str.replace(/^\d+:\s+/, ""));
+            } else {
+                return arr.map((str) => str.replace(/^\d+/, (match) => parseInt(match, 10) + 1));
+            }
+        }
+
+        // Helper function to return the selection zer-offset index and name
+        function splitSelection(selection) {
+            return selection.split(/:\s+/, 2);
+        }
+
+        // Setup the checkout page
+        // Called from newButton event listener, which means that the 'previous'
+        // page contents are still being displayed
+        function setupCheckout() {
+            console.log("setupCheckout: setting up checkout page");
+            // 1) adjust the progress bars
+            setActiveContest(numberOfContests);
+
+            // 2) loop over the voters selections per contest and create a
+            // bordered flex-box li item with a two li item sublist:
+            //    - a two sub node li consisting of the contest number and
+            //      name/title/question
+            //    - a two sub node li consisting of the ordered list of the
+            //      selections and a Change/Edit/GoTo navigation button
+            // Arbitrarily place the help text in upperSection and the actual
+            // selections in the lowerSection and the vote buttons in the
+            // bottomSection.
+            setUpperSection(null, "checkout", null, true);
+            setLowerSection("checkout", true);
+            const rootElement = document.getElementById("choiceList");
+            let index = 0;
+            for (const ggo of blankBallot.active_ggos) {
+                if (blankBallot.contests[ggo]) {
+                    for (const contest of blankBallot.contests[ggo]) {
+                        const newItem = document.createElement("li");
+                        // just ake a table for now
+                        newItem.classList.add("tableflexContainer");
+                        // td's
+                        const box1 = document.createElement("td");
+                        box1.style.textAlign = "center";
+                        const box2 = document.createElement("td");
+                        box2.style.textAlign = "left";
+                        const box3 = document.createElement("td");
+                        box3.style.textAlign = "right";
+                        const contestName = Object.keys(contest)[0];
+                        const selections = Object.values(contest)[0].selection;
+                        index += 1;
+                        console.log("contest " + index + " (" + contestName + "), selection = " + selections);
+                        box1.innerHTML = "Contest " + index + ":&nbsp&nbsp" + contestName;
+                        let max = Object.values(contest)[0].max;
+                        if (!max) {
+                            max = Object.values(contest)[0].choices.length;
+                        }
+                        if (!selections || selections.length == 0) {
+                            box2.innerHTML = "no selection - skipped";
+                            box2.classList.add("novotedText");
+                        } else {
+                            box2.innerHTML = smartenSelections(selections, Object.values(contest)[0].tally).join("<br>");
+                            if (selections.length < max) {
+                                const extraText = document.createElement("span");
+                                extraText.innerHTML = "<br>undervoted - more votes are allowed";
+                                extraText.classList.add("undervotedText");
+                                box2.appendChild(extraText);
+                            }
+                        }
+                        // Create the goto button
+                        const gotoButton = document.createElement("button");
+                        gotoButton.innerText = "Edit Contest " + index;
+                        gotoButton.id = "gotoContest" + index;
+                        // add an event listener to the button
+                        gotoButton.addEventListener("click", function (e) {
+                            console.log("Running gotoButton to contest " + index);
+                            // On a goto button click, clear out the children ...
+                            document.getElementById("upperSection").replaceChildren();
+                            document.getElementById("lowerSection").replaceChildren();
+                            document.getElementById("bottomSection").replaceChildren();
+                            // ... and goto the contest
+                            const buttonIdString = Number(this.id.match(/\d+$/)) - 1;
+                            setupNewContest(buttonIdString);
+                        });
+                        box3.appendChild(gotoButton);
+                        // Create the table and add it
+                        const table1 = document.createElement("table");
+                        table1.classList.add("tableStyle");
+                        const table2 = document.createElement("table");
+                        table2.classList.add("tableStyle");
+                        const row1 = document.createElement("tr");
+                        const row2 = document.createElement("tr");
+                        row1.appendChild(box1);
+                        row2.appendChild(box2);
+                        row2.appendChild(box3);
+                        table1.appendChild(row1);
+                        table2.appendChild(row2);
+                        newItem.appendChild(table1);
+                        newItem.appendChild(table2);
+                        rootElement.appendChild(newItem);
+                    }
+                }
+            }
+
+            // 3) For the demo, create two buttons for now: spoil and vote.
+            //    Spoil returns to the welcome page (index.html) without
+            //    voting.  Vote submits the ballot and proceeds to the VTP
+            //    part of the demo.  Voting:
+            //    - prints the cast-ballot to the page (for now) - can just
+            //      continue appending to rootElement
+            //    - when integrated with the web-api, will send the modified
+            //      blankBallot.json which will re-verify the ballot and
+            //      casts it, returning the ballot receipt and row number
+            const spoilButton = setupVoteButtonListener("Spoil Ballot", rootElement);
+            const voteButton = setupVoteButtonListener("VOTE", rootElement);
+            // Create the table and add it
+            const voteTable = document.createElement("table");
+            voteTable.classList.add("tableStyle");
+            const row1 = document.createElement("tr");
+            const col1 = document.createElement("td");
+            const col2 = document.createElement("td");
+            col2.innerHTML = "&nbsp&nbsp";
+            col1.appendChild(spoilButton);
+            col2.appendChild(voteButton);
+            row1.appendChild(col1);
+            row1.appendChild(col2);
+            voteTable.appendChild(row1);
+            rootElement.appendChild(voteTable);
+        }
+
+        // Setup a new contest.  Note - when navigating to a new contest,
+        // the previous contest selection data is gone by the time this
+        // is called.  Just being clear about that.
+        function setupNewContest(thisContestNum) {
+            console.log("Running setupNewContest: contest " + thisContestNum);
+            let thisContestName = Object.keys(listOfContests[thisContestNum])[0];
+            let thisContestValue = Object.values(listOfContests[thisContestNum])[0];
+
+            // and initialize them
+            setProgressBarColor(thisContestNum, "activeContest");
+            setActiveContest(thisContestNum);
+
+            // Setup the upper and lower sections
+            setUpperSection(thisContestNum, thisContestName, thisContestValue);
+            setLowerSection(thisContestValue);
+
+            // Note - for the moment let these be globals (until we know more).
+            // Regardless, the upper/lower setup will make sure choiceList and
+            // sortableList are already defined.
+            choiceList = document.getElementById("choiceList");
+            sortableList = document.getElementById("sortableList");
+            removeButtons = document.getElementsByClassName("remove");
+            selectedCount = 0;
+
+            // Setup the choiceList
+            setupChoiceList(thisContestName, thisContestValue);
+            if (thisContestValue.tally == "plurality") {
+                setupPluralityEventListeners(thisContestName, thisContestValue);
+            } else {
+                setupRCVEventListeners(thisContestName, thisContestValue);
+            }
+
+            // Restore previous votes.  Note - the above setUpperSection clears
+            // everything out, so to restore we only need to add the classes
+            // to the correct li - if there is something.
+            if (thisContestValue.selection) {
+                // loop over selection in order
+                for (const selection of thisContestValue.selection) {
+                    const indexName = splitSelection(selection);
+                    // Find the choice in choiceList that matches
+                    for (const choice of choiceList.children) {
+                        if (choice.getAttribute("thename") == indexName[1]) {
+                            if (thisContestValue.tally == "plurality") {
+                                // plurality is easier enough to manually update
+                                choice.classList.add("selected");
+                                choice.classList.remove("unselected");
+                                // get the svg (first child) and set fill to on (black)
+                                choice.firstElementChild.style.fill = "black"
+                                selectedCount++;
+                            } else {
+                                // Need to manually update the RCV contest
+                                updateRCVContest(choice, thisContestName, thisContestValue)
+                            }
+                            console.log("restored " + indexName[0] + ", " + indexName[1]);
+                        }
+                    }
+                }
+            }
+
+            // Setup the bottomSection - this supplies simply "next context/checkout"
+            // navigation.  Note - the voter's selection is saved when navigating away
+            // from the page - hence it needs _this_ thisContestValue.
+            setupBottomNavigation(thisContestNum, thisContestNum + 1, thisContestValue);
+            // Setup progressBar navigation
+            setupProgressBarNavigation(thisContestNum, thisContestValue);
+        }
+
+        // If here, this is the first contest
+        // set up the bars once
+        setupProgressBars(numberOfContests);
+        // set up the first contest
+        setupNewContest(0);
+
+        </script>
+    </body>
+</html>