Return to flip book view
Learn How To Maximize YourSchoology Pages To Inspire And Motivate Your Students
WWW.EDVATIVE.COMWhy We Created This FreeGuidebookLearning management systems (LMS) have become an integral part ofmodern education today. Whether using Schoology, Canvas, GoogleClassroom, or another LMS, they all provide a platform for teachers toshare course materials, assign work, and track student progress.However, LMS pages can often be dull and not very engaging forstudents. A main reasons LMS pages need to be more engaging is because they areoften the primary means of communication between teachers, students,and parents. If LMS pages are dull and unengaging, it can be difficult forstudents to stay motivated and focused on their studies. Tiresome LMSpages can also give parents the impression that the class, and even theteacher, is uninspired and boring. There are several ways in which LMS pages can be made more engagingfor students. One of the most effective methods is to use multimediacontent, such as videos, animations, and interactive activities. This helpsto break up the monotony of reading long blocks of text and keepsstudents engaged and motivated.Another important factor in making LMS pages more engaging is to makethem visually appealing. Using images, graphics, and other visual aidscan help to break up the text and make the material more interestingand easier to understand.In order to do this, teachers must ensuring that the LMS page layout isintuitive and easy to navigate, and that the material is presented in aclear and concise manner. We hope this free guidebook helps teacherstake their Schoology pages to the next level and increase studentengagement along the way. .
WWW.EDVATIVE.COMBy Using This Free Guide, YouWill Be Able to Turn Your Schoology Pages From ThisTo This... in Minutes
WWW.EDVATIVE.COMYou are in luck! This guidebook is designed knowing that the greatmajority of teachers do not know how to code. We've designed thismanual in a way that anyone can create beautifully designed, engagingSchoology pages in minutes. Yes, minutes. If you can copy and paste, you can code your very ownSchoology pages Why HTML is NeededEach page in Schoology has a Rich Text Editor that enables teachers tocustomize font styles, colors, indentations, and other options. Teacherscan also upload files, add graphics, and embed videos. However, thedefault page design in Schoology is not very engaging for students and itpresents many challenges for teachers looking to mirror their physicallyclassroom environment in the learning management system (LMS). Agood answer to this challenge is to customize the HTML code on eachpage.Disclaimer: While using HTMLwill improve the overallpresentation of pages inSchoology, script embed codesare not supported in the LMS.Meaning there are limitations to what teacherscan use HTML for, and moreoften than not, Schoology will notallow teachers to just embed HTML scripts from other sites. What if I don't Know how tocode?
WWW.EDVATIVE.COMDon't Believe Us?We know teachers are sometimes the biggest sceptics. Why shouldn'tthey be? Their given the ultimate responsibility of educating students,shaping what the next generation of leaders look like, and they do it,often, without the time and resources afforded to most otherprofessionals in different industries. So, let's see if this guidebook canwork for you. STEP 1Open a blank Schoology page. Name it Edvative Test Page. STEP 2Switch to edit HTML by selecting the bottom choice asshown on the image here. CLICK HERESTEP 3Copy and paste the following HTML code into yourSchoology page. Then click create at the bottom of the page. <p><img src="https://images.squarespace-cdn.com/content/v1/5e2dcd4b10214c670134a751/1582993703395-DXE641F064BXPAW8XIS2/1.png?format=1500w" alt="1.png?format=1500w" width="1046" height="392" style="background-color:#040404; margin-top: -20px; margin-bottom: -20px;" /></p><h1 style="color: #000000; background-color: #f7b01b; text-align: left;"><span style="color: #ffffff;"> Edvative Learning Test Page</span></h1><h1><span style="color: #000000;">... And you didn't think you could code!</span></h1><p><span style="color: #000000;"> </span></p>
WWW.EDVATIVE.COMDoes Your Page Look Like This?Easy Right?Now, let's quickly learn what this all means by learning how to edit itemson your Edvative Test Page. But first, please take a moment to learnmore about Edvative Learning and its mission to help support schoolsand educators as they work to personalize the learning experiences fortheir students. If you find this guidebook helpful and want to bring Edvative to work with your team, please visit www.edvative.com and send us a message.
WWW.EDVATIVE.COMIn 2018, Dr. Samuel Mormando, the Director of Technology, Innovation,and Online Learning for the Garnet Valley School District joined Dr.Lindsay Zavislak in organizing a new 501(c)(3) educational non-profitorganization created to support educators in K-12 schools. At that time, Edvative’s mission was to help schools provide cost-effective professional learning to their teachers in the areas ofintentional instructional design and the use of Open EducationalResources (OER). Since its creation, Edvative has grown its organization’s scope (e.g.,device management and cyber security mitigation) but remainscommitted to its mission of helping to support schools and individualeducators as they focus on personalizing learning experiences for theirstudents for little or no cost to them. Take a moment to visit www.edvative.com to download even more FREERESOURCES, read about its innovative Accessibility Assistant Widgetthat makes websites ADA compliant, and learn how to partner withEdvative for your professional learning needs. Edvative's District Partners About Edvative Learning
WWW.EDVATIVE.COMMade with Creative CommonsLearn How To Maximize Your Schoology Pages To Inspire And MotivateYour Students by Samuel Mormando. Cover by Samuel Mormando | ©2023 Published under Creative Commons Attribution-Noncommerial-ShareAlike (CC BY-NC-SA), version 4.0 by Edvative Learning |Downloadable guidebook available at www.edvative.com.This guidebook is published under a CC BY-NC-SA license, which meansthat you can distribute, remix, adapt, and build upon the material in anymedium or format for noncommercial purposes only, and only so long asattribution is given to the creator. If you remix, adapt, or build upon thematerial, you must license the modified material under identical terms.
WWW.EDVATIVE.COMFirst Things FirstWe tried to create our Schoology page templates in a way that limits theamount of "editing" of code teachers will need to do. When possible,teachers should just edit the Schoology page using the "Visual" windowand not the HTML code window. Use the Edvative Learning Test Page as the example, teachers canchange the text in the header and add text, images, and videos anywhereon the page as they would normally, without switching to the HTMLwindow. Give it a try! STEP 1 Open the Edvative Test Page. STEP 2Be sure to stay on the Visual editor by making sure the topbutton is filled in. CLICK HERESTEP 3Edit the text in the banner or add text, images, videos belowthe banner. Next try deleting the Edvative Logo image andreplacing it something else. You may need to adjust the size of the image or delete any additionalwhite space that may have been added above your image. If your imagehas too much white space underneath, try changing the vertical spaceusing these steps:STEP 3aSTEP 3bIn edit mode, click on the image. Then click on theimage icon.In the pop-up window, add -20 to the box next toVertical Space. if -20 is too much, adjust as needed.
WWW.EDVATIVE.COMLet's Have Some Fun With CodeAccess the CodeSTEP 1 Open the Edvative Test Page. STEP 2Be sure to stay access the HTML editor by making sure thebottom button is filled in. CLICK HERE
WWW.EDVATIVE.COMLet's Take a Closer Look<p><img src="https://images.squarespace-cdn.com/content/v1/5e2dcd4b10214c670134a751/1582993703395-DXE641F064BXPAW8XIS2/1.png?format=1500w" alt="1.png?format=1500w" width="1046" height="392" style="background-color:#040404; margin-top: -20px; margin-bottom: -20px;" /></p><h1 style="color: #000000; background-color: #f7b01b; text-align:left;"><span style="color: #ffffff;"> Edvative Learning TestPage</span></h1><h1><span style="color: #000000;">... And you didn't think you couldcode!</span></h1><p><span style="color: #000000;"> </span></p>Image codingImage codingImage codingThe text in blue above is the HTML code for the Edvative image andbackground. A few items to note - the background color (black) uses thehex #040404. Hex color # are discussed in subsequent pages. Also, toachieve a seamless border between the image and header element, a(-20) margin was used. Using margins is also discussed later. The text in green above is the HTML code for the Edvative Learningheader. The text in red above is the HTML code for the second header ("and youdidn't think you could code!"). Now let's have some fun learning how to change the HTML code toachieve the desired look and feel of your Schoology page.
WWW.EDVATIVE.COMLet's Now Edit The Code (It'sEasy!) STEP 1 Open the Edvative Test Page. STEP 2Be sure to stay on the HTML editor by making sure thebottom button is filled in. CLICK HERESTEP 3<p><img src="https://images.squarespace-cdn.com/content/v1/5e2dcd4b10214c670134a751/1582993703395-DXE641F064BXPAW8XIS2/1.png?format=1500w" alt="1.png?format=1500w" width="1046" height="392" style="background-color:#040404; margin-top: -20px; margin-bottom: -20px;" /></p><h1 style="color: #000000; background-color: #f7b01b; text-align:left;"><span style="color: #ffffff;"> Edvative Learning TestPage</span></h1><h1><span style="color: #000000;">... And you didn't think you couldcode!</span></h1><p><span style="color: #000000;"> </span></p>Let's change the background of the banner that reads,"Edvative Learning Test Page." In the HTML editing window,replace #f7b01b with #00308F, then click create. Youshould see a header color similar to the one below:New header color using the Hex #00308F.
WWW.EDVATIVE.COMLet's Talk About ColorA color HEX code is a hexadecimal way to represent a color in RGBformat by combining three values – the amounts of red, green and bluein a particular shade of color. These color hex codes have been anintegral part of HTML for web design, and remain a key way ofrepresenting color formats digitally. There are a number of websites thatprovide HEX # colors. The sites below are all free and will provide morethan enough choices when looking for color options. We recommendyou bookmark these sites to make it easier the next time you want toedit colors on your pages. RBG ColorCodeRBG Color Code offers a quick and easy way to find theperfect color for your Schoology page. Simply use thesearch field to type a color or use the color matrix tofind your preferred color. When ready, just copy theHEX # and paste it into the correct area in HTML code. Image ColorPickerImage Color Picker allows users to upload any image tofind the exact HEX # contained in that image. The sitegives the HEX color code value, RGB value and HSVvalue. Under 'Use Your Image' users can upload theirown image (for example a screenshot on a desktop),paste an image from clipboard, put a picture url in thetextbox below. Or use an website url. Some of our favorite colors to usein Schoology. TRUE BLACK #000000DARK BLUE #00308FMAROON #800000GRAY #877e74HUNTER GREEN #316649HARVEST GOLD #E69900
WWW.EDVATIVE.COMMore on ColorColor is an important element of design for a website. It can be used tocreate an atmosphere, draw attention, and guide users through theinterface. Colors can evoke emotions, create a mood, and even influencethe user’s behavior.Colors are one of the most powerful tools that ateacher can use to create an impactful and memorable experience forstudents. Colors can be used to draw attention to certain areas of the page, createvisual hierarchy, and guide users through the LMS page. Color can alsobe used to communicate the brand identity and mood of the class.Different colors can have different connotations, so it’s important toconsider the message that you want to convey before you choose acolor palette. Color and AccessibilityRatio: Text and interactive elements should have a color contrastratio of at least 4.5:1.Color as indicator: Color should not be the only indicator forinteractive elements. For example, underline links on hover, or marka required field with an asterisk.Color blindness: Red/green color blindness is the most common, soavoid green on red or red on green. (Think especially about avoidingusing red and green for “bad” and “good” indicators).Web accessibility guidelines (WCAG) have standards that help ensureenough contrast exists between content and the background, so thattext and non-decorative images are legible for anyone with low vision orcolor deficiencies. A few best practices per WCAG include:To learn more about color requirements with accessibility, visit the AIMWeb (Accessibility in Min) website:https://webaim.org/articles/contrast
WWW.EDVATIVE.COMAlternative (Alt) Text ismeant to convey the“why” of the image as itrelates to the content of adocument or webpage. Itis read aloud to users byscreen reader software,and it is indexed by searchengines. Important remindersLet's Talk About ImagesImages can help to break up large blocks of text and make thematerial more visually appealing.Images can help to clarify and illustrate complex concepts and ideas,ultimately making them easier for students to understand.Images can help to create a more interactive and dynamic learningexperience. Images can help to make the material more memorable and easier torecall, as they can provide a visual reference point for students.Overall, images can play a key role in making LMS pages more engagingand effective for students. It is important, however, to ensure that theimages used are relevant to the material and are used in a way thatenhances the learning experience, rather than simply being used fordecorative purposes.Be Sure to Use Alt TextRemove the BackgroundUnwanted elements in your background candistract your students from the purpose ofthe image. It is good practice to removebackgrounds in images before posting themin your LMS. A good FREE website you can use to removebackgrounds is: https://www.remove.bg/
WWW.EDVATIVE.COMUtilizing videos can be a great way to help students comprehenddifficult concepts because it gives them the ability to watch and re-watch the video as many times as needed.Teachers can either link to a video or use embed codes. While bothmethods can be effective, it’s important to understand the advantagesof using an embed code. Embed codes allow teachers to directly add thevideo to their lesson. This means that students can access the videowithout having to leave the LMS.Embedded videos are also easier for students to find, since they areincluded in the main content page. This increases the chances ofstudents actually viewing the video and engaging with the content. Inaddition, embedded videos are more secure than those linked from anoutside source. When it comes to video length, research suggesting that the length ofinstructional videos can have an impact on student learning andengagement. In general, shorter videos tend to be more effective forstudent learning, as they can help to keep students focused and preventthem from becoming bored or distracted. However, the optimal lengthof an instructional videowill depend on a variety of factors, including the content of the video, the age and ability of the students, and the learning goals for the video. As shown in the graphic, the quality of the content and the way it is presented can also have a significantimpact on student learning. Let's Talk About Video
WWW.EDVATIVE.COMFun fact: While it does not work for every LMS, youcan copy pages from one LMS to another by using thismethod. However, HTML codes seem to work better when copied from Schoology to another LMS (e.g., Canvas) than the other way around. Using HTML to Copy EntirePagesThe most common ways to duplicate pages in Schoology is to either tryto copy and paste all the contents manually, or to create a page, thensave it to resources, then copy that page from resources. But what if there was a similar way? Since Schoology pages are essentially their own unique webpages, it iseasy to copy all of the contents from one page to another, simply bycopying the HTML code. STEP 1 Open any Schoology page.STEP 2Be sure to open the HTML editor by making sure the bottombutton is filled in. CLICK HERESTEP 3Copy the entire HTML code for the page and page it into anew page using the HTML editor on that new page. Done !
WWW.EDVATIVE.COMBuilding Your Own Pages withThe Following Code Snippets
WWW.EDVATIVE.COMSchool Page Template(Basic Header)<div style="background-color: #00308f; margin-bottom: 5px;"><h1 style="padding: 15px; color: #000000; background-color: #00308f; text-align: right;"><span style="color: #ffffff;"><span style="color: #000000;"> <span style="color:#ffffff;">U.S. History 11</span></span></span></h1><h3 style="margin-top: -20px; text-align: right;"><span style="color: #ffffff;"><spanstyle="color: #000000;"> <span style="color: #ffffff;">Teacher Name | 2022-2023 </span></span></span> </h3></div><p><img src="/system/files/attachments/page_embeds/m/2022-12/American-Pamphlets-1920x550_63921b0e934d4.jpg" alt="American-Pamphlets-1920x550_63921b0e934d4.jpg"style="margin-top: -12px; margin-bottom: -12px;" title="" /></p><div><span></span><div style="padding: 15px; background-color: #f3f7f7; margin-bottom: 15px;"><h3 style="padding: 5px; background-color: #f3f7f7; margin-bottom: 15px;"> MessageHere</h3><p> </p></div></div>Copy & Paste the CodeChange Colors & More
WWW.EDVATIVE.COMSchool Page Template (two Columns)<div style="background-color: #316649; padding: 15px; border-bottom: 0px solid #ffffff;"><h2 style="text-align: left;"><span style="color: #ffffff;"><strong>Page Title Here </strong></span></h2></div><div><img src="https://k12.instructure.com/courses/943403/files/18415787/preview" alt=""style="border-bottom: 10px solid #316649;" /></div><div><div class="img-rounded border border-trbl border-round" style="float: right; background-color:#f5f5f5; width: 450px; height: 500px; padding: 5px; border: 1px solid #E8E8E0;"><h3 style="color: #ffffff; background-color: #316649; text-align: center; padding: 5px;">Right SideColumn</h3><h4 style="margin: 1em 0px; padding: 0px; font-size: 12px; border: 0px none;">Text Here</h4><h4 style="text-align: left; padding: 5px 5px 5px 10px;"> </h4><p> </p></div><div class="img-rounded border border-trbl border-round" style="float: left; background-color:#f5f5f5; width: 450px; height: 500px; padding: 5px; border: 1px solid #E8E8E0;"><h3 style="color: #ffffff; background-color: #316649; text-align: center; padding: 5px;">Left SideColumn</h3><h3><span class="S1PPyQ" style="margin: 0px; padding: 0px;"></span>Text Here</h3><p> </p></div></div>
WWW.EDVATIVE.COMDivider Code Snippets</div><div class="grid-row"><div class="col-sm-12 col-md-12 col-lg-6"><div style="background-color: #660000;"><h3 style="text-align: left;"><span style="font-size: 14pt;"><strong style="color:#ffffff; padding: 10px;"> Sub Header Text</strong></span></h3></div>Sub Header Text</div><h3 style="padding: 15px; color: #000000; background-color: #660000; text-align:left;"><span style="color: #ffffff;"><span style="color: #000000;"> <spanstyle="color: #ffffff;">Sub Header Text</span></span></span></h3><div class="content-box" style="margin-top: 1px; margin-bottom: 10px; background-color: #f7f7f7; padding: 1.5% 2.5%;"><h1><span style="font-size: 12pt; line-height: 2;">Text Here</span></h1><p> </p><p> </p><p> </p></div>Sub Header TextWith Shadowed Text Box
WWW.EDVATIVE.COMDivider with Textbox & VideoSub Header TextWith Shadowed Text Box& Video PlaceholderTo add your own YouTube video,only replace this part of the code.Read More of Next Page</div><div class="grid-row"><div class="col-sm-12 col-md-12 col-lg-6"><div style="background-color: #660000;"><h3 style="text-align: left;"><span style="font-size: 14pt;"><strong style="color:#ffffff; padding: 10px;"> Sub Header Text</strong></span></h3><p style="text-align: right;"><iframesrc="https://www.youtube.com/embed/NpEaa2P7qZI" width="479" height="272"style="float: right; padding: 6px 20px 20px 20px;" allowfullscreen="allowfullscreen"></iframe></p><div class="content-box" style="margin-top: 10px; margin-bottom: 10px;background-color: #f7f7f7; padding: 1.5% 2.5%;"><h4><span style="font-size: 12pt; line-height: 2;">Text</span></h4><p> </p><p> </p><p> </p><p> </p><p> </p><p> </p><p> </p></div>
WWW.EDVATIVE.COMReplacing The Video Placeholder</div><div class="grid-row"><div class="col-sm-12 col-md-12 col-lg-6"><div style="background-color: #660000;"><h3 style="text-align: left;"><span style="font-size: 14pt;"><strong style="color:#ffffff; padding: 10px;"> Sub Header Text</strong></span></h3><p style="text-align: right;"><iframesrc="https://www.youtube.com/embed/NpEaa2P7qZI" width="479" height="272"style="float: right; padding: 6px 20px 20px 20px;"allowfullscreen="allowfullscreen"></iframe></p><div class="content-box" style="margin-top: 10px; margin-bottom: 10px;background-color: #f7f7f7; padding: 1.5% 2.5%;"><h4><span style="font-size: 12pt; line-height: 2;">Text</span></h4><p> </p><p> </p><p> </p><p> </p><p> </p><p> </p><p> </p></div>New YouTube VideoOnly copy this part to replace the section in RED above.Do not delete "This also works for embedding images. Just add thefollowing next to your image's width and height.style="float: right; padding: 6px 20px 20px 20px;"
WWW.EDVATIVE.COMFull Page Template (w/VideoPlaceholder)
WWW.EDVATIVE.COMTemplate Code (w/Video Placeholder)<div style="background-color: #000000; padding: 15px; border-bottom: 0px solid#ffffff;"><h2 style="text-align: left;"><span style="color: #ffffff;"><strong>Page TitleHere</strong></span></h2></div><div><imgsrc="https://k12.instructure.com/courses/943403/files/18415787/preview" alt=""style="border-bottom: 10px solid #660000;" /></div><div class="content-box" style="margin-top: 10px; margin-bottom: 10px;background-color: #f7f7f7; padding: 1.5% 2.5%;"><h1><span style="font-size: 12pt; line-height: 2;">Header Text</span></h1></div><div class="grid-row"><div class="col-sm-12 col-md-12 col-lg-6"><div style="background-color: #000000;"><h3 style="text-align: left;"><span style="font-size: 14pt;"><strong style="color:#ffffff; padding: 10px;"> Sub Header Text</strong></span></h3><p style="text-align: right;"><iframesrc="https://www.youtube.com/embed/NpEaa2P7qZI" width="479" height="272"style="float: right; padding: 6px 20px 20px 20px;" allowfullscreen="allowfullscreen"></iframe></p><div class="content-box" style="margin-top: 10px; margin-bottom: 10px;background-color: #f7f7f7; padding: 1.5% 2.5%;"><h4><span style="font-size: 12pt; line-height: 2;">Text</span></h4><p> </p><p> </p><p> </p><p> </p><p> </p><p> </p><p> </p><p> </p><p> </p></div></div></div></div>*Copy and paste the code in BLUE toadd more sections to your page