Notion API-driven JavaScript online quiz: From Notion database to interactive web pages

This article will guide you how to build an interactive JavaScript online quiz using the Notion API. While Notion is not designed specifically for creating quizzes, we can achieve this by cleverly applying its tabular database and combining technologies such as JavaScript, Node.js, and Express.

Core points:

• Flexible application of Notion table database to JavaScript quiz construction.
• Build JavaScript and Node.js environments, and use Express and dotenv for server management and environment variable protection.
• Use Notion internal integration token for secure authentication to ensure the security of API interaction.
• Retrieve quiz data from Notion through structured queries and convert it to a format available to JavaScript applications.
• Dynamically render quiz questions and answers, and provide user interaction and visual feedback (the correct answer shows green, the wrong answer shows red).
• Use the flexibility of Notion API to customize and automate quiz settings to make it a scalable solution.

Project settings:

We divide the project settings into two parts: Notion and code. You need a Notion account and installed Node.js environment. The complete code can be found on GitHub (link is omitted).

Notion terminal settings:

1. Create Notion account and log in.
2. Create a new page, select "Add Page" and name it.
3. Select the table database as the page type.
4. Design database structure:
   • Question: Title Type
   • Answers: Multiple choice types (used to store multiple answer options)
   • Correct answer (Correct): Text type

5. Enter the test questions, answer options and correct answers in the form.

6. Create Notion API Integration: Visit the Notion API website, click "My Integration", and then click "Create a New Integration". Fill in the title, select the associated workspace, and copy your internal integration token after submission.

7. Add the newly created integration to your Notion database: Click "Share" in the database, then "Invite", select the integration you just created and invite.

Code side settings:

Use a pre-prepared Notion template repository (link omitted) that contains the initial code to interact with the Notion API.

1. Clone the template repository.
2. Installation dependencies: Run npm install or yarn install. Dependencies include @notionhq/client, dotenv and Express.
3. Create .envFile and add your Notion API key and database ID:

<code>NOTION_API_KEY = YOUR_TOKEN_HERE
NOTION_API_DATABASE = YOUR_DATABASE_ID_HERE</code>

(Note: Add the .env file to .gitignore to prevent it from being submitted to the code repository.)

4. Run npm start or yarn start to start the server.

Get test data:

.index.js function in the getDatabase file is responsible for obtaining data from the Notion database:

exports.getDatabase = async function () {
  const response = await notion.databases.query({ database_id: databaseId });
  // ... (映射數(shù)據(jù)庫條目到JavaScript對(duì)象) ...
};

This function uses structured queries to get data from the Notion API and maps it to an array of JavaScript objects containing the question, answers, and correct answers.

Show data in the browser:

Dynamically create HTML elements using JavaScript to render quiz questions and answers. CSS style is used to beautify the interface. Key code snippet (the detailed DOM operation code is omitted, please refer to the original text):

• createQuestion Function: Create and render the question.
• createAnswers Function: Create and render answer options and add a click event listener. Click event listener changes the background color of the answer options (correctly green and wrongly red) based on whether the answer selected by the user is correct.

User interaction:

Enable user interaction and feedback by adding click event listeners to each answer option.

Summary:

This article demonstrates how to use the Notion API to build a full-featured JavaScript online quiz. By cleverly applying Notion table database and JavaScript programming, we can easily create custom interactive learning tools. For complete code and more detailed steps, please refer to the GitHub repository provided in the original text.

The above is the detailed content of Use the Notion API to Create a Quiz with JavaScript. For more information, please follow other related articles on the PHP Chinese website!