Utilisez l'API de notion pour créer un quiz avec JavaScript

NOTION JavaScript en ligne JavaScript: de la base de données de notion aux pages Web interactives

Cet article vous guidera comment créer un quiz en ligne JavaScript interactif à l'aide de l'API de notion. Bien que la notion ne soit pas conçue spécifiquement pour créer des quizz, nous pouvons y parvenir en appliquant intelligemment sa base de données tabulaire et en combinant des technologies telles que JavaScript, Node.js et Express.

Points de base:

• Application flexible de la base de données de la table de notion à JavaScript Quiz Construction.
• Créer des environnements JavaScript et Node.js et utilisez Express et Dotenv pour la gestion des serveurs et la protection des variables d'environnement.
• Utiliser le jeton d'intégration interne de notion pour une authentification sécurisée afin d'assurer la sécurité de l'interaction API.
• Récupérer les données de quiz de la notion à des requêtes structurées et les convertir en un format disponible pour les applications JavaScript.
• Rendez dynamiquement les questions et réponses de quiz et fournissent l'interaction des utilisateurs et les commentaires visuels (la bonne réponse montre le vert, la mauvaise réponse montre le rouge).
• Utilisez la flexibilité de l'API de notion pour personnaliser et automatiser les paramètres de quiz pour en faire une solution évolutive.

Paramètres du projet:

Nous divisons les paramètres du projet en deux parties: notion et code. Vous avez besoin d'un compte de notion et d'un environnement Node.js installé. Le code complet peut être trouvé sur GitHub (le lien est omis).

Paramètres de terminal de notion:

1. Créer un compte de notion et connecter.
2. Créez une nouvelle page, sélectionnez "Ajouter une page" et nommez-la.
3. Sélectionnez la base de données du tableau comme type de page.
4. Structure de la base de données de conception:
   • Question: Type de titre
   • Réponses: Types de choix multiples (utilisés pour stocker plusieurs options de réponse)
   • Réponse correcte (correct): Type de texte

5. Entrez les questions de test, les options de réponse et les réponses correctes dans le formulaire.

6. Créer l'intégration de l'API de notion: visitez le site Web de l'API de notion, cliquez sur "mon intégration", puis cliquez sur "Créer une nouvelle intégration". Remplissez le titre, sélectionnez l'espace de travail associé et copiez votre jeton d'intégration interne après la soumission.

7. Ajoutez l'intégration nouvellement créée à votre base de données de notion: cliquez sur "Partager" dans la base de données, puis "inviter", sélectionnez l'intégration que vous venez de créer et d'inviter.

Paramètres côté code:

Utilisez un référentiel de modèle de notion pré-préparé (lien omis) qui contient le code initial pour interagir avec l'API de notion.

1. Clone Le référentiel du modèle.
2. Dépendances d'installation: Exécutez npm install ou yarn install. Les dépendances incluent @notionhq/client, dotenv et Express.
3. Créer .env Fichier et ajouter votre clé API de notion et ID de base de données:

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

(Remarque: ajoutez le fichier .env à .gitignore pour empêcher qu'il ne soit soumis au référentiel de code.)

4. Exécuter npm start ou yarn start pour démarrer le serveur.

Obtenez des données de test:

La fonction

.index.js dans le fichier getDatabase est chargée d'obtenir des données à partir de la base de données de notion:

<code class="language-javascript">exports.getDatabase = async function () {
  const response = await notion.databases.query({ database_id: databaseId });
  // ... (映射数据库条目到JavaScript对象) ...
};</code>

Cette fonction utilise des requêtes structurées pour obtenir des données de l'API de notion et la mappe à un tableau d'objets JavaScript contenant la question, les réponses et les réponses correctes.

Afficher les données dans le navigateur:

Créez dynamiquement des éléments HTML à l'aide de JavaScript pour rendre les questions et réponses de quiz. Le style CSS est utilisé pour embellir l'interface. Extrait de code clé (le code d'opération DOM détaillé est omis, veuillez vous référer au texte d'origine):

• createQuestion Fonction: Créez et rendez la question.
• createAnswers Fonction: Créez et rendez les options de réponse et ajoutez un écouteur d'événements de clic. Cliquez sur l'écouteur de l'événement modifie la couleur d'arrière-plan des options de réponse (correctement verte et à tort rouge) en fonction de la question de savoir si la réponse sélectionnée par l'utilisateur est correcte.

Interaction utilisateur:

Activer l'interaction et les commentaires de l'utilisateur en ajoutant des écouteurs d'événements de clic à chaque option de réponse.

Résumé:

Cet article montre comment utiliser l'API de notion pour construire un quiz en ligne JavaScript complet. En appliquant intelligemment la base de données de la table de notion et la programmation JavaScript, nous pouvons facilement créer des outils d'apprentissage interactifs personnalisés. Pour un code complet et des étapes plus détaillées, veuillez vous référer au référentiel GitHub fourni dans le texte d'origine.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!