In this lab you will build a small server-side math quiz for Brock's server. A Python CGI script will keep a bank of 10 math questions on the server, choose 3 of them at random, send only the question text to the browser, and grade the submitted answers after the user fills in the blanks.

The main ideas here are using GET to request quiz data, using POST to submit JSON answers, keeping the answer key on the server, using random.sample(...) to choose a smaller quiz from a larger question bank, and rendering typed inputs with TypeScript in the browser.

By the end of the lab, opening the uploaded page on Brock should show three random math questions, let the user type answers, and report which answers are correct without sending the answer key to the browser first.

You should read the Week 09 lecture notes first, especially the CGI sections. This lab assumes you already know why server-side scripting is useful and how JSON moves between the browser and the server.

You also need access to your Brock or Sandcastle account so you can upload the final files into public_html/lab09.

The project below uses plain HTML, CSS, and TypeScript. There is no Angular backend, and there is no Node.js backend running on Brock. The browser runs the generated JavaScript, while Brock runs the generated Python CGI file.

If you want the exact project folder created for you first, download the Lab 09 material ZIP. It contains the same files used in the walkthrough below.

Download Lab 09 material ZIP

The project structure should look like this.

The HTML page and stylesheet live at the project root. The browser TypeScript source lives in frontend/quiz.ts, and the backend generator lives in backend/quiz-api.ts. After the build, the browser JavaScript goes into dist/frontend/quiz.js, the backend helper goes into dist/backend/quiz-api.js, and that helper writes the upload-ready Python CGI file to dist/backend/quiz-api.cgi.

Start with this index.html file. It has a button to request three random questions, a form where the questions will be inserted, and a result section where the server response will be shown after grading.

Add the CSS below to styles.css. The design is intentionally simple: one control card, one question area, and a result area that clearly marks correct and incorrect answers.

Create frontend/quiz.ts. The browser-side code requests random questions with GET, renders one text box for each question, then sends the typed answers back with POST.

Notice the endpoint path: dist/backend/quiz-api.cgi. The uploaded HTML page, browser JavaScript, and CGI file all stay inside the same public_html/lab09 folder.

Create backend/quiz-api.ts. This TypeScript file writes the Python CGI code into dist/backend/quiz-api.cgi. The generated Python script owns the question bank and the answer key. A GET request chooses 3 questions at random from the bank of 10. A POST request grades the submitted answers and returns JSON.

The function random.sample(QUESTIONS, PUBLIC_QUESTION_COUNT) still appears inside the generated Python code. That is the key line that makes the quiz choose 3 different questions from the larger list.

Use the tsconfig.json file below so both TypeScript files compile into the dist folder.

Just like Labs 04 and 05, open a terminal inside the lab09-brock-cgi-math-quiz folder and run the TypeScript compiler in watch mode.

That rebuilds dist/frontend/quiz.js for the browser and dist/backend/quiz-api.js as the local backend helper while you work.

If you started from the material ZIP, the project already includes dist/backend/quiz-api.cgi. If you are typing the files yourself from scratch, or if you change backend/quiz-api.ts later, let tsc -w finish rebuilding dist/backend/quiz-api.js, then run node dist/backend/quiz-api.js one time so it rewrites dist/backend/quiz-api.cgi before you upload.

The Brock server does not use quiz-api.js. The useful backend file is dist/backend/quiz-api.cgi. That .cgi file belongs in the uploaded dist/backend folder. Do not upload dist/backend/quiz-api.js to the server because Brock will not run that file through CGI, so it is useless there.

In this lab, keep the whole uploaded site together inside public_html/lab09. The dist folder should contain both frontend and backend, so the browser can request dist/backend/quiz-api.cgi from the same lab folder.

Your Brock or Sandcastle account should end up with this file structure. The number in parentheses is the permission you should set for that folder or file.

The browser-side JavaScript file dist/frontend/quiz.js does need to be uploaded because the page uses it in the browser. The CGI file dist/backend/quiz-api.cgi also needs to be uploaded because Brock runs that file on the server. The backend helper file dist/backend/quiz-api.js does not get uploaded.

That means the useful backend file on Brock is dist/backend/quiz-api.cgi. If you upload quiz-api.js instead, Brock will not run it through CGI, so it is useless on the server.

If you created or edited the files on Windows, open dist/backend/quiz-api.cgi in VS Code before upload and switch the line endings from CRLF to LF. CGI files with Windows line endings often fail on the server.

After the upload, visit this URL.