Verwenden Sie die API der Begriff, um ein Quiz mit JavaScript zu erstellen

API-gesteuerte JavaScript Online Quiz: Von der Begriffsdatenbank zu interaktiven Webseiten

In diesem Artikel wird Sie mithilfe der API der Begriffs -API ein interaktives JavaScript -Online -Quiz erstellt. Während der Begriff nicht speziell für das Erstellen von Quiz konzipiert ist, können wir dies erreichen, indem wir seine tabellarische Datenbank geschickt anwenden und Technologien wie JavaScript, Node.js und Express kombinieren.

Kernpunkte:

• Flexible Anwendung der Vorstellungstabelle Datenbank auf JavaScript Quiz Construction.
• bauen Sie JavaScript- und Node.js -Umgebungen und verwenden Sie Express und DOTenv für den variablen Schutz der Serververwaltung und für den Umgebungsschutz.
• Begriff Internal Integration Token für eine sichere Authentifizierung verwenden, um die Sicherheit der API -Interaktion zu gewährleisten.
• Quizdaten aus dem Begriff durch strukturierte Abfragen abrufen und in ein Format umwandeln, das JavaScript -Anwendungen zur Verfügung steht.
• Dynamisch Quiz Fragen und Antworten rendern und Benutzerinteraktion und visuelles Feedback geben (die richtige Antwort zeigt Green, die falsche Antwort zeigt Rot).
• Verwenden Sie die Flexibilität der Begriffs -API, um die Quizeinstellungen anzupassen und zu automatisieren, um sie zu einer skalierbaren Lösung zu machen.

Projekteinstellungen:

Wir teilen die Projekteinstellungen in zwei Teile ein: Begriff und Code. Sie benötigen ein Begriffskonto und eine installierte Node.js -Umgebung. Der vollständige Code kann auf GitHub gefunden werden (Link wird weggelassen).

Begriffsanschlusseinstellungen:

1. Begriffskonto erstellen und melden Sie sich an.
2. Erstellen Sie eine neue Seite, wählen Sie "Seite hinzufügen" und nennen Sie sie.
3. Wählen Sie die Tabellendatenbank als Seitentyp aus.
4. Designdatenbankstruktur:
   • Frage: Titeltyp
   • Antworten: Multiple -Choice -Typen (verwendet, um mehrere Antwortoptionen zu speichern)
   • Richtige Antwort (richtig): Texttyp

5. Geben Sie die Testfragen ein, beantworten Sie die Optionen und korrigieren Sie Antworten im Formular.

6. Integration von API -Integration erstellen: Besuchen Sie die API -Website der Begriff, klicken Sie auf "Meine Integration" und klicken Sie dann auf "Erstellen einer neuen Integration". Füllen Sie den Titel aus, wählen Sie den zugehörigen Arbeitsbereich aus und kopieren Sie Ihr internes Integrationstoken nach der Einreichung.

7. Fügen Sie die neu erstellte Integration in Ihre Begriffsdatenbank hinzu: Klicken Sie in der Datenbank auf "Teilen" und dann "einladen", wählen Sie die gerade erstellte Integration und einladen.

Code -Seiteneinstellungen:

Verwenden Sie ein vorbereitete Begriffsvorlagen-Repository (Link weggelassen), das den Anfangscode enthält, um mit der API der Begriff zu interagieren.

1. Klonen Sie das Template -Repository.
2. Installationsabhängigkeiten: Ausführen npm install oder yarn install. Zu den Abhängigkeiten gehören @notionhq/client, dotenv und Express.
3. erstellen .env Datei erstellen und fügen Sie Ihren Begriff -API -Schlüssel und Ihre Datenbank -ID hinzu:

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

(HINWEIS: Fügen Sie die .env -Datei zu .gitignore hinzu, um zu verhindern, dass sie an das Code -Repository übermittelt wird.)

4. Ausführen npm start oder yarn start, um den Server zu starten.

Testdaten abrufen:

Die Funktion

.index.js in der getDatabase -Datei ist für das Abrufen von Daten aus der Begriffsdatenbank verantwortlich:

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

Diese Funktion verwendet strukturierte Abfragen, um Daten von der API der Begriff abzurufen und sie auf ein Array von JavaScript -Objekten zuzuordnen, die die Frage, Antworten und korrekte Antworten enthalten.

Daten im Browser anzeigen:

Erstellen Sie dynamisch HTML -Elemente mit JavaScript, um Quiz Fragen und Antworten zu rendern. Der CSS -Stil wird verwendet, um die Schnittstelle zu verschönern. Schlüsselcode -Snippet (der detaillierte DOM -Betriebscode wird weggelassen. Bitte beziehen Sie sich auf den Originaltext):

• createQuestion Funktion: Erstellen und rendern Sie die Frage.
• createAnswers Funktion: Erstellen und Rendern von Antwortoptionen und fügen Sie einen Klick -Ereignis -Listener hinzu. Klicken Sie auf Event -Listener ändert die Hintergrundfarbe der Antwortoptionen (korrekt grün und fälschlicherweise rot), je nachdem, ob die vom Benutzer ausgewählte Antwort korrekt ist.

Benutzerinteraktion:

Aktivieren Sie die Interaktion und das Feedback der Benutzer durch Hinzufügen von Klickereignishörern zu jeder Antwortoption.

Zusammenfassung:

Dieser Artikel zeigt, wie die API der Begriffs-API verwendet wird, um ein vollwertiges JavaScript-Online-Quiz zu erstellen. Durch die clevere Anwendung der Vorstellungstabellendatenbank und die JavaScript -Programmierung können wir problemlos benutzerdefinierte interaktive Lernwerkzeuge erstellen. Für den vollständigen Code und detailliertere Schritte finden Sie im GitHub -Repository im Originaltext.

Das obige ist der detaillierte Inhalt vonVerwenden Sie die API der Begriff, um ein Quiz mit JavaScript zu erstellen. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!