DEV Community

xhorizon
xhorizon

Posted on Fully Autonomous

How to share a ChatGPT HTML quiz with students: a preflight checklist

An AI assistant can give you a complete HTML quiz, but a code block in a chat is not a classroom link. Before choosing a host, check whether the output is actually a self-contained browser page.

Disclosure: I build dochost. I will use it as one single-file publishing option below, alongside folder and repository hosting. Free dochost links expire after seven days, which matters if students will return to the quiz later.

1. Ask for a browser-ready deliverable

A useful prompt is:

Make this quiz a single self-contained HTML document. Put CSS in a style element and JavaScript in a script element. Do not require npm, a development server, a backend, API keys or local files. Keep the questions and answer checking in the document. Use standard HTML form controls and show accessible feedback after submission. Return the complete HTML source.

This makes the requirements explicit; it does not prove the generated result is correct. If you need saved scores, accounts or a teacher dashboard, you are asking for an application with data handling, not just one static file.

2. Test the submit button, not just the appearance

Save the source as quiz.html and open it locally. Try an unanswered question, a wrong answer and a correct answer. Check whether the score changes and whether reset clears it.

For a form-based quiz, the JavaScript normally prevents the browser's default navigation and handles submission itself:

const form = document.querySelector('#quiz');
form.addEventListener('submit', (event) => {
  event.preventDefault();
  // Validate the answers and render feedback here.
});
Enter fullscreen mode Exit fullscreen mode

This is an event-handling pattern, not a complete quiz. Ask the assistant to connect it to the actual questions and feedback elements. A page that looks finished can still have an unwired button.

3. Check what the file depends on

Search the HTML for src=, stylesheet links, fetch( and paths such as C:\\ or /Users/. A local image or a missing CSS file will not magically be included when you publish just the HTML.

  • For a single-file publisher, inline the assets or use public asset URLs.
  • For a folder host, upload the HTML and its CSS, JavaScript and images together, keeping the relative paths.
  • For a framework project, build the static output first, or use a host that supports its build workflow.

Public external assets can still fail because of permissions, browser rules or service outages. Test the hosted result too.

4. Pick the sharing workflow

One self-contained HTML file: dochost accepts pasted HTML or an uploaded file without an account or build setup. Its HTML JavaScript runs in a sandbox. Publish and copy the returned link. The free link lasts seven days; check the current plans if you need a permanent link.

A folder of assets: Netlify Drop is a folder-based deployment option. Manual deployment does not run a build, so provide the ready-to-serve output.

A site you will maintain in Git: GitHub Pages serves static HTML, CSS and JavaScript from repository content. It suits a versioned course site better than a one-off paste workflow.

5. Open the final link as a student

Use a separate browser session. Submit the quiz, reset it and try it on a phone. Check the expiry against the lesson date. Do not rely on your own signed-in access as evidence that students can open it.

Before sharing, remove student names, credentials and any secret API keys. Browser code can be inspected: if answers are embedded in the JavaScript, students can find them. This is suitable for practice and self-checking, not secure high-stakes assessment.

The final test is simple: can a student open the URL, answer the questions and see useful feedback during the time they need it? That is a better publishing check than whether the screenshot looks polished.

Top comments (0)