<p>This tutorial provides the steps for creating a Course Slide Summary and Quiz Generator, leveraging AI to turn static PDFs into engaging, interactive content. It allows users to create summaries and quizzes from lengthy course slides. Knowledge you'll gain from this tutorial will help you build your own AI tools using <a href="https://toolmark.ai">toolmark.ai</a></p>
<p>You can check it out at <a href="https://course-slide-quiz.toolmark.app">https://course-slide-quiz.toolmark.app</a>, or watch the video below to see what we are building</p>
<div class="aspect-video"><video controls autoplay name="media"><source src="https://s3.us-east-1.amazonaws.com/resource.mixa.site/toolmark/video/course_slide.mp4" type="video/mp4"></video></div>
<p>Let's dive in</p>
<h2 id="adding-components"><a aria-hidden="true" tabindex="-1" href="#adding-components"><span class="icon icon-link"></span></a>Adding Components</h2>
<ol>
<li>Add a <a href="/components/inputs" title="File Upload Input">File Upload Input</a>, and set the following values in the Settings Menu
<ol>
<li>Data Key: <code>courseFile</code></li>
<li>Label: <code>Upload your course slides</code></li>
<li>File Type: <code>PDF</code></li>
</ol>
</li>
<li>Add a <a href="/components/elements" title="Button">Button</a> component, and change its text from <code>Button</code> to <code>Parse PDF</code></li>
<li>Add a <a href="/components/elements" title="Text">Text</a> component, and changes its text from <code>Text</code> to <code>{{pdfContent}}</code>. We will populate <code>pdfContent</code> data key later on while creating the actions</li>
<li>We want to have 2 sections, one for the summary, one for the quiz. Depending your layout preference, you can use some Container, Tab, or Collapsable components. Let's go with Tabs</li>
<li>Add a <a href="/components/containers" title="Tabs">Tabs</a> component, and set the following values in the Settings Menu
<ol>
<li>Tab 1: <code>Summary</code></li>
<li>Tab 2: <code>Quiz</code></li>
<li>Style: <code>Bordered</code></li>
</ol>
</li>
<li>Click on the <code>Summary</code> tab in Canvas to activate it and then select the <code>Tab - Tab 1</code> where we will drag and drop some components into</li>
<li>Add a <a href="/components/elements" title="Button">Button</a> component into the Summary tab, and change its text from <code>Button</code> to <code>Summarize Slides</code></li>
<li>Add a <a href="/components/elements" title="Text">Text</a> component into the Summary tab, and changes its text from <code>Text</code> to <code>{{pdfSummary}}</code>. We will populate <code>pdfSummary</code> data key later on while creating the actions</li>
<li>Click on the <code>Quiz</code> tab in Canvas to activate it and then select the <code>Tab - Tab 2</code> where we will drag and drop some components into</li>
<li>Add a <a href="/components/elements" title="Button">Button</a> component into the Quiz tab, and change its text from <code>Button</code> to <code>Generate Quiz</code></li>
<li>Add a <a href="/components/elements" title="Text">Text</a> component into the Quiz tab, and changes its text from <code>Text</code> to <code>{{quiz}}</code>. We will populate <code>quiz</code> data key later on while creating the actions</li>
</ol>
<p>Optionally, select the Tabs component and set <code>Hidden When</code> to <code>!pdfContent</code> to hide it till pdf content is ready</p>
<p>If you want to make it look nicer, in the last step, you can use Collapsable components for each question and answer. Since it's more complicated, we'll add a section at the end of this tutorial. Feel free to follow those steps if you want to learn more.</p>
<h2 id="creating-actions"><a aria-hidden="true" tabindex="-1" href="#creating-actions"><span class="icon icon-link"></span></a>Creating Actions</h2>
<p>Open the Actions Menu from the Left Menu.</p>
<p>Create a new Action with the following information to read the pdf content</p>
<ul>
<li>Type: <code>Extract PDF Text</code></li>
<li>Name: <code>read PDF</code></li>
<li>PDF Url: <code>{{courseFile}}</code>, this will read the content of the File Upload Input component we added earlier</li>
<li>Result Data Key: <code>pdfContent</code></li>
</ul>
<p>Create a new Prompt with the following information to summarize the pdf content using GPT</p>
<ul>
<li>Model: <code>GPT 4o</code></li>
<li>Name: <code>summarize</code></li>
<li>Prompt:</li>
</ul>
<pre><code>You are a professional course content summarizer. Summarize the following slide content:
{{pdfContent}}
</code></pre>
<ul>
<li>Output: <code>Text</code></li>
<li>Result Data Key: <code>pdfSummary</code></li>
</ul>
<p>Create a new Prompt with the following information to create a quiz from the slide content</p>
<ul>
<li>Model: <code>GPT 4o</code></li>
<li>Name: <code>generate quiz</code></li>
<li>Prompt:</li>
</ul>
<pre><code>You are a professional course quiz generator. Create some quiz questions for the following course content:
{{pdfContent}}
</code></pre>
<ul>
<li>Output: <code>Text</code></li>
<li>Result Data Key: <code>quiz</code></li>
</ul>
<h2 id="attach-actions-to-buttons"><a aria-hidden="true" tabindex="-1" href="#attach-actions-to-buttons"><span class="icon icon-link"></span></a>Attach Actions to Buttons</h2>
<ol>
<li>Select the <code>Parse PDF</code> Button, and from its Settings menu, select <code>read PDF</code> action from the dropdown</li>
<li>Select the <code>Summarize Slides</code> Button in Summary Tab, and from its Settings menu, select <code>summarize</code> action from the dropdown</li>
<li>Select the <code>Generate Quiz</code> Button in Quiz Tab, and from its Settings menu, select <code>generate quiz</code> action from the dropdown</li>
</ol>
<p>Save the tool and click Preview</p>
<ol>
<li>Upload a pdf file with some course content</li>
<li>Click <code>Parse PDF</code> button. It will show you the parsed content in the Text component, whose value was <code>{{pdfContent}}</code></li>
<li>Click <code>Summarize Slides</code> button, It will show you the summary of the slides in the Text component, whose values was <code>{{pdfSummary}}</code></li>
<li>Click <code>Generate Quiz</code> button, It will show you some questions and answers in the Text component, whose values was <code>{{quiz}}</code></li>
</ol>
<h2 id="enhancements"><a aria-hidden="true" tabindex="-1" href="#enhancements"><span class="icon icon-link"></span></a>Enhancements</h2>
<p>Now let's make Quiz section a bit nicer by just showing the question and hiding the answer in Collapsable component.</p>
<ol>
<li>Click on the Quiz tab to activate it and remove the Text component whose content is <code>{{quiz}}</code></li>
<li>Add a <a href="/components/containers" title="Repeated Container">Repeated Container</a> component below the <code>Generate Quiz</code> button.</li>
<li>Select the Repeated Container component and set the following in its Settings Menu
<ol>
<li>Repeat Count: <code>{{quizQuestions.length}}</code>, this will help repeating content for each quiz question</li>
</ol>
</li>
<li>Add a <a href="/components/containers" title="Collapsable">Collapsable</a> component into the <code>Repeated Item</code> component in the Repeated Container.</li>
<li>Uncheck the <code>Default Open</code> setting from its Settings menu to not show the answers till user clicks on it</li>
<li>Change the <code>Title</code> of the Collapsable to <code>{{quizQuestions[i].question}}</code>. While Repeated Container repeats the Collapsable <code>quizQuestions.length</code> times, it will replace [i] with the current index. So, you'll see each questions showing up nicely</li>
<li>Change <code>Content</code> of the Collapsable to <code>{{quizQuestions[i].answer}}</code></li>
<li>Feel free to change the styling/shadow of the components to your liking</li>
</ol>
<p>Now, let's go and update the <code>generate quiz</code> action we created earlier to return the data in the structure we want</p>
<ol>
<li>Open <a href="/editor/action-menu" title="Actions menu">Actions menu</a> from the left and edit <code>generate quiz</code> action by clicking the Pen icon</li>
<li>Change <code>Prompt</code> to</li>
</ol>
<pre><code>You are a professional course quiz generator. The data you return should be in this format: [{question: "Question 1", answer: "Answer 1"}, {question: "Question 2", answer: "Answer 2"}]

Create 5 quiz questions for the following course content:
{{pdfContent}}
</code></pre>
<ol start="3">
<li>Change <code>Output Type</code> to <code>JSON/List</code></li>
<li>Change <code>Result Data Key</code> to <code>quizQuestions</code></li>
<li>Save the action</li>
</ol>
<p>Go and try it out again. This time, when you generate a quiz, <code>quizQuestions</code> will have a list of questions in it. Repeated Container will show each question and answer in its own Collapsable component.</p>

Getting Started

Concepts

Learn the power of Toolmark's Data Binding feature. Effortlessly write and read data using input components, actions, and more for enhanced interactivity and user engagement.

Data Binding

Easily transform any AI tool created on Toolmark.ai into a Chrome Extension with no extra effort. Install the Toolmark.ai Chrome Extension, add your tools, and access them directly from any website for a seamless browsing and productivity boost.

How-to Use the Chrome Extension

Explore a variety of Toolmark examples to enhance your AI App building experience. Discover tips, tricks, and templates to boost productivity and organization. Perfect for users at any level!

Examples

examples

Step-by-step City Guide

Recipe Generator

Cover Letter Writer

Course Slide Summary and Quiz Generator

Landing Page Builder

Language Translator

Discover the Toolmark Editor, your ultimate tool creation workspace featuring an intuitive interface with Canvas, Left, Right, and Top Menus for seamless design. Perfect for professionals and beginners alike, it simplifies building and customizing tools with drag-and-drop components, real-time previews, and easy publishing. Start crafting engaging tools today!

Toolmark Editor

editor

Discover the power of the Canvas with its drag-and-drop interface for an intuitive design experience. Learn how to select, customize, and manage UI components like buttons and input fields for your tool's layout.

Canvas

Learn how to use Toolmark's Component Menu for easy drag-and-drop of Containers, Elements, Inputs, and AI Inputs into the canvas, enhancing your tool-building process with customization and efficiency.

Component Menu

Optimize and manage your tool's components with ease using Toolmark's Layer Menu. This feature allows for streamlined visibility control, effortless reordering, and simple renaming of components, enhancing your design process and organization.

Layer Menu

Discover how to enhance your projects with dynamic interactions using the Actions Menu. Learn to create prompt and integration actions for data fetching, AI content generation, and more.

Action Menu

Effortlessly manage and debug your interactive tools with Toolmark's Data Store Menu. Seamlessly add static data to components, enhancing tool functionality and user experience. Ideal for developers seeking efficient state management and debugging solutions.

Data Store Menu

Learn how to use Toolmark's Style Menu to customize and design your tool. Drag and drop components, access functionalities, and explore styling options to create the perfect AI tool for your needs.

Style Menu

Master Toolmark's Tool Config Menu: Easily set up subdomains, titles, descriptions, categories, and cover images to optimize and personalize your tools for better engagement and visibility.

Tool Config Menu

Dive into the essentials of using the Component Settings Menu in Toolmark with our detailed guide. Learn how to effortlessly customize UI components to align with your brand, enhance user experience, and elevate your tool's design.

Component Settings Menu

Enhance your text components with the Bubble Menu, offering customization options like headings, code blocks, links, and text formatting. Utilize markdown for quick edits.

Bubble Menu

Learn Toolmark's Top Menu and how to efficiently use the Back, Undo/Redo, Preview, Save, Publish, and tool naming features to streamline your design process, ensuring a seamless and productive tool creation experience.

Top Menu

Actions

actions

Explore the comprehensive guide to AI Prompts in Toolmark. Learn how to create, chain, and use AI Prompts with various models for dynamic and interactive note-taking. Understand how to leverage variables, output types, and Replicate models for enhanced productivity.

AI Prompts

Chrome Extension Actions

Explore Toolmark Editor's Components: Dive into using Containers, Elements, Inputs, and AI Inputs for crafting interactive, visually stunning tools with ease. Perfect your tool-building with our drag-and-drop interface.

Components

components

Containers

Master the art of document design with our comprehensive guide to elements. Learn how to use text, links, buttons, images, dividers, and HTML to create visually engaging and interactive content.

Elements

Learn about common settings, types of inputs including Text, Multiline, List, Editor, Select, Multi Select, Radio Group, Checkbox, Toggle, and Range Inputs, and best practices for enhancing user interaction and data collection.