The examples below will show you how we are using generative AI to reformat existing content for Canvas. The code blocks created by the generative AI get inserted into the HTML of the text editor on any page.
<aside> <img src="/icons/package_gray.svg" alt="/icons/package_gray.svg" width="40px" /> Lengthy Canvas page with a table of contents that navigates directly to section headings.
</aside>
I am creating a page of content for the Instructure Canvas LMS. It's a long bit of text and I'd like to break it up into large blocks with headings and a table of contents at the top of the page where if a student clicks a link for a heading in the table of contents it takes them directly to that section on the page. Use inline CSS and HTML. Create a template that includes five sections consisting of lorum ipsum text so that I can test, and make sure code comments are clear so that I can easily change the heading names, drop in my content, and add more headings as needed. Let me know if you have any clarifying questions.
Here's a simple template to get you started. It includes 5 sections, a table of contents, and inline CSS to keep things basic and simple. You can customize it as you need.
<!DOCTYPE html>
<html>
<head>
<style>
/* CSS Styles for the Page */
body {
font-family: Arial, sans-serif;
}
.section {
margin-bottom: 2em;
}
.section h2 {
color: #333;
}
.section p {
color: #666;
}
/* End of CSS Styles */
</style>
</head>
<body>
<!-- Table of Contents -->
<div id="table-of-contents">
<h1>Table of Contents</h1>
<ul>
<li><a href="#section1">Section 1</a></li>
<li><a href="#section2">Section 2</a></li>
<li><a href="#section3">Section 3</a></li>
<li><a href="#section4">Section 4</a></li>
<li><a href="#section5">Section 5</a></li>
</ul>
</div>
<!-- End of Table of Contents -->
<!-- Section 1 -->
<div class="section" id="section1">
<h2>Section 1</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas venenatis, mi id cursus tristique, purus lectus bibendum nisi, eget fermentum enim mauris ac magna.</p>
</div>
<!-- End of Section 1 -->
<!-- Section 2 -->
<div class="section" id="section2">
<h2>Section 2</h2>
<p>Quisque aliquam dolor nec eros fermentum, a feugiat nibh tincidunt. Aliquam semper lorem at interdum ullamcorper. Integer non odio at eros ullamcorper dapibus nec a augue.</p>
</div>
<!-- End of Section 2 -->
<!-- Section 3 -->
<div class="section" id="section3">
<h2>Section 3</h2>
<p>Morbi dictum, nisl at ultrices luctus, massa mi auctor diam, a interdum felis nibh ut sapien. Suspendisse vestibulum nunc nec neque facilisis, ut feugiat mauris semper.</p>
</div>
<!-- End of Section 3 -->
<!-- Section 4 -->
<div class="section" id="section4">
<h2>Section 4</h2>
<p>Vivamus quis massa pulvinar, aliquam quam sed, pulvinar lacus. Fusce rutrum urna vel felis tincidunt, in facilisis neque sollicitudin. Nunc vitae rutrum dui, in convallis justo.</p>
</div>
<!-- End of Section 4 -->
<!-- Section 5 -->
<div class="section" id="section5">
<h2>Section 5</h2>
<p>Donec auctor ex id ligula auctor, ut venenatis mi sodales. Aenean aliquet velit a tellus ornare, a cursus libero egestas. Vivamus sit amet massa vel odio iaculis vehicula.</p>
</div>
<!-- End of Section 5 -->
</body>
</html>
This should give you a sense of how the sections are separated and how the page navigation works. You can replace the "Lorem Ipsum" text with your own content as needed.
<aside> <img src="/icons/square-three-fourths_gray.svg" alt="/icons/square-three-fourths_gray.svg" width="40px" /> Nicely formatted table with content.
</aside>
Human: You are an expert user interface designer and are helping me design a page in instructure canvas LMS for a generative AI prompt literacy course. The page will list popular generative AI tools to help advance knowledge for the student. I'm going to upload the page content, help me reformat it to that it's well organized and easy for people to read and understand. You can use in-line CSS, HTML, and Tables. Tell me when you are ready for input.
I'm ready for input. Please share the content that you want to be reformatted and organized for your Instructure Canvas LMS page.