Transform any document into an interactive quiz

How to turn process doc into an interactive web-hosted quiz using Claude Artifacts, Replit, and Zapier.

advanced pro

Tool: ClaudeTool: ReplitTool: Zapier Topic: ContentTopic: Education

2024-11-13

In this tutorial, we will transform process documentation into a web-hosted, interactive quiz using Claude Sonnet 3.5, Artifacts, Replit, and Zapier.

Artifacts is the new Feature Preview that launched with Anthropic’s new model, Claude Sonnet 3.5. Artifacts generates code and then renders that code in a web preview pane within your chat window, allowing for one of the best coding experiences with an LLM chatbot. This will allow us to go from process documentation to interactive quizzes in minutes.

This tutorial is aimed at showing you what is capable in an LLM-first creative coding workflow with a tool like Claude and how you can start hooking that code into sharable workflows using tools like Replit and Zapier.

You’ll need:

Steps we’ll follow in this tutorial:

Step 1: Create Zap and Google Sheet for capturing quiz results
Step 2: Enable the Artifacts feature in Claude
Step 3: Upload process documentation and prompt Claude to generate a quiz
Step 4: Export code and host on Replit
Step 5: Finalize Zap

Step 1: Create Zap and Google Sheet for capturing quiz results

To start, we’re going to create a Zap that can receive quiz results and store them in a Google Sheet. To do this, navigate to Zapier and create a new Zap. For the trigger, search and select the “Webhooks by Zapier” application. Set the Event to “Catch Hook”.

Test the trigger and copy the webhook URL. You will need this for the following step when we prompt Claude to create our interactive quiz.

Next, create a Google Sheet where we can receive the results from the quiz. We will have five questions for our quiz, so we’ll create a Google Sheet with the quiz taker’s name, responses to each question, and their final score.

With the Google Sheet created, head back to Zapier and search and select Google Sheets for the next Action step in your Zap. Set the Event to “Create Spreadsheet Row.”

In the Action tab, find your newly created Spreadsheet and Worksheet. We will NOT map any data to the Google Sheets column headers yet. We need to create our interactive quiz with Claude first. So hold here for now with your Zap and we will return in Step 5 to complete it.

Step 2: Enable the Artifacts feature in Claude

Now that we have the structure of our Zap created, we can head to Claude to create our interactive quiz. You need to enable the new Artifacts Feature Preview in Claude to do this. If you’re in a chat window with Claude, click the little beaker icon below the chat text box.

The Feature Preview window will open. Toggle the Artifacts feature “On” to enable the feature. When you enable Artifacts, it will be enabled by default for your future chats.

💡 Tip: If you’re on the homepage of Claude, you might see a window allowing you to enable Artifacts from the homepage.

Step 3: Upload process documentation and prompt Claude to generate a quiz

Now that Artifacts is enabled, we can upload our process documentation and prompt Claude to reference the information to create an interactive quiz. For our example quiz, we’ll be providing Claude with a process document of escalation procedures for customer support representatives and providing very detailed instructions on how to develop the quiz. Make sure to add your webhook URL to the prompt from step 1.

Sample prompt:

Create an Interactive Quiz for Employee Training

Using the attached process documentation for reference, create an interactive quiz with a single HTML file (including HTML, CSS, and JavaScript) to test employees on the process. The quiz should be designed to work within the constraints of platforms like Replit, avoiding complex JavaScript that might be blocked by security policies.

Quiz Requirements:
1. A form that captures the user's name.
2. 5 multiple-choice questions derived from key points in the documentation.
3. A submit button to complete the quiz.
4. Display the user's score on the same page after submission.
5. Send the user's name and score to a specified webhook URL.

Technical Specifications:
- Use HTML5 for structure.
- Include internal CSS for styling.
- Implement JavaScript within a <script> tag in the HTML file.
- Ensure the quiz works without relying on external libraries or APIs.
- Use a traditional form submission method to send data to the webhook, avoiding fetch or AJAX calls.

Design Guidelines:
- Create a simple, clean design with clear typography and spacing.
- Ensure the quiz is easy to read and navigate.
- Use a light background color for the form and subtle visual separation between elements.

Submission Method:
- Set the form's action attribute to the webhook URL.
- Use method="POST" in the form tag.
- Include a hidden input field to store the calculated score.

JavaScript Functionality:
- Prevent the default form submission.
- Calculate the score based on correct answers.
- Display the score to the user.
- Set the score in the hidden input field.
- Submit the form programmatically to send data to the webhook.

Webhook Information: Use this webhook URL for form submission: [insert Zapier webhook link]

Please provide the complete HTML file, including all necessary HTML, CSS, and JavaScript, as a single artifact that can be copied and pasted directly into a project. Ensure that the solution is thoroughly tested and works reliably in a Replit environment.

💡 Tip: You might notice this is a robust prompt. To ensure the code can compile in Replit and post responses to our Zapier webhook, we went through many rounds of revision to create this prompt so that it generates the exact code required to prevent errors. That said, errors can still happen when working with code. If they do, provide the error message back to Claude and prompt it to fix the code accordingly.

With this prompt and the attached documentation, Claude should create an interactive quiz for you within the Artifacts preview pane on the right side of the chat window that you can test.

Step 4: Export code and host on Replit

Now that we have our interactive quiz, we can copy the code to Replit to host it. To do this, at the bottom right corner of the Artifacts window, click the “Copy contents” button.

💡 Tip: As you might notice, the webhook URL and question answers are stored in the HTML file, or in the client-side code, which means anyone who opens the console can get access to that information. If/when you are deploying apps like this to production, you would want to update the code to store this sensitive data in a server-side component.

Head over to Replit and click the “Create Repl” button to create a new Repl.

Select the “HTML, CSS, JS” template and title your project. Click the “Create Repl” button to create the project.

Within the Repl, open the “index.html” file and paste the code from Claude over the existing contents. Click the “Run” button at the top of the screen to generate the Webview in the right-side window.

Test your quiz and submit the results.

💡 Tip: As mentioned previously, errors could arise at this step. If they do, head back to Claude, provide the error messages, and ask Claude to fix the code accordingly.

Step 5: Finalize Zap

With our first test submission completed, we can head back over to Zapier to finalize our Zap. Click on the Catch Hook trigger step, go to the Test tab, and click the “Find new records” button or the “Test Trigger” button to poll for your test submission. If all worked correctly, you should see a request with your test submission.

Now, click on your Google Sheets step and map the submitted data from the Webhook to the corresponding columns in your Google Sheet in the Action tab.

Send the test data from Zapier to your Google Sheet and you should see the responses populate in your quiz results table.

And that’s it! You’ve developed an interactive quiz from process documentation. Make sure to enable your Zap and deploy your Replit so you can share the interactive quiz and start receiving responses.

‍