Just Registered? -CLICK HERE TO GRAB A SITE NAME

Start Guide with Table of Contents for Easy Navigation

Start Guide

Setup

Obtain Invite Code or Purchase Registration

If your school has purchased a block of registrations then they will provide you with an Invitation Code that you will use to Register.

You may utilise our Free Trial or purchase registrations. If you purchase group registrations you will receive school/class Invite Codes.

Register

If you purchased registration directly through this site then you will be automatically registered. However, if you have been given an Invitation Code by your School or Teacher then you need to Register

Confirm email

If you are asked to confirm your email then go to your email account that you used during purchase or registration and click on the confirm link sent from StudentSites and then you can Login.

Login

StudentSites requires you to Login to you “Dashboard” which allows you to build your website.

Create New Site

If you purchase registration directly then you will create your first site as part of that process.

Invite Code users will need to create a site after they first login:

• Click on “My Sites” in your “Dashboard Menu”
• Click on “Add New” button
• Fill in the details and click “CREATE SITE”
• Create as many websites as you need (Max 100MB)
• Via “My Sites”, go to which ever site you need to edit from your Dashboard after you login.

Lost Password

If you lose your password please Reset your Password

Dashboard

Your site has an administration dashboard which has all the tools for you to build your pages and website. Site admin is also known as your “Back End”. When you login, initially you are looking at your “Dashboard“.

The “Dashboard” contains both a horizontal and vertical menu. The StudentSites dashboard is a simplified version of the full WordPress dashboard suitable for educational use.

My Sites

The “My Sites” menu contains all of your websites hosted on StudentSites, as you can have as many as you like.

Media

The “Media” menu allows you to manage all your media for your sites such as photos and files etc. Image file types should be “.JPG” or “.PNG”. If you have “.jfif” images just rename them as “.jpg” to upload them, for example rename “horses.jfif” to “horses.jpg” before uploading

Pages

The “Pages” menu shows all the pages for that site and allows you to add new pages and edit existing ones.

Appearance

Customise

• Site Identity: logo, site title and tagline etc.
• Colours of site
• Theme options such as search box etc
• Cover Template
• Background Image
• Menus: create site menus
• Widgets: control footers
• Home page Settings

Menus

Create site menus and where they appear.

Background

Set the site background.

Users

The “Users” menu allows the viewing of existing users and the creation of new users and for you to set the user role.

Tools

The “Tools” menu allows you to export, import or delete your site.

Pages Overview

View and add new pages to your site using the “Pages” menu from your dashboard

For each page, when you hover the mouse over, the options of Edit, Quick Edit, Trash and View will appear as in the graphic above.

The actual site hosted on the internet as seen by your site visitors can be seen with “View” which allows you to see your created page and test your site. When you are in your admin panel you will also have a “View Site” icon up top (little house icon).

It is a good idea to use “right mouse click” “open in new window” so that you have the “View Page” open in another tab or preferably on another monitor so that you can easily and instantly see your edits take effect on your hosted site. Just click the “refresh” circular arrow next to home which is to the left of the address bar every time you make an edit and hit the “Update” button.

When you are “viewing” your site and you are still logged into StudentSites, then you will have the horizontal admin menu up top.

Setting the Front Page

To set your site’s Front Page go to the “Dashboard- Appearance- Customise- Home page settings“

Document OR Block Settings

When you are in your Dashboard editing a page then on the right hand side you can either select “Document” or “Block” which controls all the settings for your page or that specific block (must be selected first).

Preview OR Update

When editing your page you can “save” your work by clicking the “Update” button on the top right which also “publishes” that content to the internet on your site. Alternatively, you can just preview your work with updating by using the “Preview” button.

Block OR Code Editor

In the very top right hand side of your page dashboard are three vertical dots that allow you to select the code editor if you need to work with the page as html code. You can swap back to the block editor. Note that WordPress may not recognise some of your html code and give you a warning, that you can ignore, when you swap back to block editor mode.

Page Comments

Page comments are turned off throughout StudentSites for student protection reasons.

Password Protect Pages

The visibility of each page in your site can be individually controlled via the page editor with three options:

• Public: Visible to everyone on the internet
• Private: Only visible to site admins and editors
• Password Protected: Protected with a password you choose. Only those with the password can view page content.

Anonymity

By default StudentSites is setup to prevent any communication or interaction with Users creating Sites for student protection reasons.

When creating sites, users of StudentSites need to ensure that they don’t inadvertently place identifying information on their Site such as names, photos or geolocation data etc.

For some sites you may deliberately want to advertise details about your School or Class but this should only be done under the direct guidance of your Teacher/School. For example, you may want to create a class project website and then link or embed that on your school website?

Websites created on StudentSites are hosted on the internet and can be viewed by anyone who has the URL so Users need to take responsibility and consider preserving their anonymity when adding content to their Site Pages.

Content Blocks

WordPress 2020 uses “Content Blocks” which you add using the plus sign in a circle when you are editing a page. The add block symbol is in the top left or directly beneath a currently selected content block on your page.

Key Common Blocks

• Paragraph: use for normal text
• Heading: (H1 to H6)- linked to auto Table of Contents
• Image: use to fill page width with a single image (use “bordered-large” or “bordered-small” in “Advanced” additional CSS for a an image border)
• Cover: put text over the top of an image
• Gallery: multiple images
• List: bullet points etc
• Audio: embed an audio player
• File: create a link to download a file
• Video: embed a video from your library (don’t use this for video links to youtube etc)

Extra Features-Content Blocks

• Gallery – Photo Gallery: awesome photo galleries and effects
• MaxButtons: highly customisable buttons
• Quiz Maker: create your own quizzes and collect the results
• Visualizer: create data tables and charts
• Poll Maker: create polls (single questions) and collect results
• Recipe Card: create cooking and nutrition sites
• Advanced iframe: embed other sites
• CodeMirror: display code plus run Javascript/HTML

Extra Features-Dashboard

Some extra features (i.e. not standard to WordPress) have their own content blocks (listed above) while others can only be accessed through the Dashboard.

• Photo Gallery: dynamic image galleries & effects
• Image Hotspot: add images/maps and dynamic location icons
• Quiz Maker: create quizzes and collect results
• Poll Maker: create single question polls & collect answers
• Image Slider (AYS Slider): visual effects with your image slider
• PopupBox: add custom”Popups” to your page
• FAQ Builder: Frequently Asked Questions builder
• Recipe Card: create your own food site
• MaxButtons: customised page buttons
• News Tickers: scrolling text tool
• Visualizer: create tables, charts and graphs
• School Calendar: create your own customised school calendar
• Advanced iFrames: embed your cloud models or other sites
• CodeMirror: Mobile friendly code editor/syntax checker & run your own demo JavaScript/HTML code

Key Formatting Blocks

• Preformatted: display text with different formating to page
• Classic: original text editor tool but still great
• Pullquote: display a quote
• Code: great for code snippets
• Table: insert tables
• Custom HTML: insert your own HTML code such as “iframes”

Key Layout Elements

• Media & Text: Display images etc next to text
• Button: create eye catching button style links
• Columns: add columns
• Spacer: block of blank space
• Separator: horizontal line

Create Core Page Content

Table of Contents

All pages by default generate a Table of Contents (TOC) based on “Headings” (H1 to H6) but only if there are a minimum of three different Headings eg. H1, H2 and H3. The numbering and indentation is automatic based on heading hierarchy and sequential order on the page.

TOC can be disabled, for a particular page, in Document settings on the right hand side of page creation, down the bottom using the “Disable TOC”

Top of Page Button

The “Top of Page Button” will automatically appear in the bottom left corner, after the user begins to scroll down the page. If the user clicks this they go back to the top of the page. This is very useful for very long pages.

Title

Note that heading blocks (H1 to H6) are linked to the automatic creation of a Table of Contents (TOC) on the page (unless you turn this off), so don’t use heading blocks for your titles that you don’t want in your TOC.

Use the Paragraph block and change the text size and background colour to create a title that doesn’t use actual html headings i.e. H1-H6.

Try the “Button” Block in “Layout Elements” section of the Blocks selector which can make a large colourful block of text suitable as titles which don’t go into the TOC.

Text

Normal text can be added with either the “Paragraph” Common Block or the “Classic” Formatting Block.

Other useful blocks are “List“, “Media & Text“, “Preformatted” and “Code” Blocks.

HotLinks

HotLinks connect the user, upon mouse click or tap on mobiles, to an external URL (website). Many blocks have this feature indicated by the “Chain Link” icon. For example, the “Heading” and “Paragraph” Blocks are shown below- select the text that you wish to link then click on the “Link” icon on the top enter the URL. It is a good idea to set it to open in a new window.

Images

The “Image” Common block is for a single image as is “Cover” Common Block which also allows you to put text over the top.

Image file types should be “.JPG” or “.PNG”. If you have “.jfif” images just rename them as “.jpg” to upload them, for example rename “horses.jfif” to “horses.jpg” before uploading.

Try the “Media & Text” Layout Elements Block for a side by side look.

Use the “Photo Gallery” Dashboard Tool for multiple images.

Note that single black borders can be added to images in the “Block” settings under “Advanced-Additional CSS” by adding either “bordered-large” or “bordered-small” into the dialogue box.

Videos

Videos that are uploaded directly to your site can be added to your page using the “Video” Common Block. However, this is very bad practice as it will consume valuable storage space on your site, so it is recommended to “iFrame” your hosted videos from another site (explained below).

Links to videos hosted on other sites such as YouTube can also be inserted using the “Link” tool in the “Paragraph” Block. It is recommended to select the “Open in New Window” option.

iFrames

Please note that WordPress will strip out any iFrame code that you directly insert into your page html code for security reasons.

Advanced iFrame Pro block tool must be used to embed iFrames into your page as described below (or for advanced users, use the shortcodes directly).

Embedding “iFrames” creates a type of portal to another site within your page. Videos, 3D models and Scratch games etc can be “iFramed” by getting the code generated from the host site. The advantage of “iFrames” is that the user doesn’t leave your site so it’s a better user experience and the media is not hosted on your site which chews up space and bandwidth.

Only use https websites for iframes

Get the iframe embed code from the site that you’d like to embed for example a Scratch Game:

<iframe src="https://scratch.mit.edu/projects/393036536/embed" allowtransparency="true" width="485" height="402" frameborder="0" scrolling="no" allowfullscreen></iframe>

Copy only the https URL itself i.e. from the above example:

https://scratch.mit.edu/projects/393036536/embed

Paste the https URL into the URL box on the right hand side of Advanced iFrame block and it should render automatically.

If you want to delete the iframe you will have to select the Block as described above and use the Block three dots “more options” to delete. Alternatively, go to the code editor and manually delete the code and then go back to the visual editor.

If you want advanced settings to display the iframe then you will have to research that using the “Advanced iFrame Pro” tool in the Dashboard menu.

Create a WebSite

A website can be a single page, however, often they have multiple pages with a navigation menu.

Extra Pages

Extra pages can be added from the Dashboard “Pages” menu on the left.

Parent Page

The “Parent Page” can be set for each page in the “Document” settings tab of each page (on the right hand side). This results in your pages being hierarchically organised under their parent page or pages and also makes it easy to build site menus. Note that giving a page a parent page will make that page a sub-directory of the parent page on your website eg. www.studentsites.stemacademy.com.au/mysite/parentpage/page

In this example, the “EDD” page is the “Parent Page” of the “Checkout” which is the “Parent Page of “Purchase Confirmation“, “Purchase History” and “Transaction Failed” pages. The dashes indicate the parent page hierarchy.

Site Menus

Site Menus can be added from “Dashboard – Appearance – Menus”

Menus are created by selecting the desired page on the left hand side (see graphic below) and clicking “Add to Menu” after which they appear on the right hand side. Menu items on the right can be reordered vertically and also dragged horizontally to make them sub-menus. The “Desktop Horizontal Menu” setting is recommended. The menu must be saved by using the “Save Menu” button on the far right.

Site Settings

Go to “Dashboard – Appearance – Customise” and the following site settings can be modified:

• Site Identity: logo, site title and tagline etc.
• Colours of site
• Theme options such as search box etc
• Cover Template
• Background Image
• Menus: create site menus
• Widgets: control footers
• Home page Settings

Visit Site

You can visit your site on the web by going to “Dashboard – My Sites – Visit Site”. The URL will always be: “https://studentsites.stemacademy.com.au/your_site_name” where “your_site_name” is what you entered when you created the original site.

Extra Sites

You can create as many WebSites as you like (max 100MB) by going to “Dashboard – My Sites” and then clicking on “Add New” button. You can also set your “Primary Site” and see all the sites that you have in your account.

Site Tools

The “Site Tools” are in “Dashboard – Tools” menu and allow you to “Import“, “Export” and “Delete” your sites.

Site Users

You can add existing StudentSites subscribers, such as your teacher or group members as users to your site. Please note that you cannot add users to your site who are not registered subscribers of StudentSites.

Anybody can view your site as it is hosted on the internet and this is not a “User”.

Site “Users” are given specific “User Roles” which affords them specific privileges within your site.

When you add other StudentSites subcribers as “Users” to your site then your site will show up in their StudentSites Dashboard, however, they will only have the privileges that you assign defined through the following “User Roles“.

User Roles

When you add “Users” to your site you also need to allocate them a “User Role” which affords them specific privileges within your site.

Administrator

You are by default an “Administrator” of your own sites which means that you have full privileges to change everything including totally deleting your site, so be carefully creating other users as “Administrators”.

Editor

An “Editor” can create pages and modify their own and all other pages.

Author

An “Author” can create pages but only modify their own pages not pages created by others.

Contributor

A “Contributor” can create and modify their pages but cannot publish them to the site which must by done by an above mentioned role.

Subscriber

A “Subscriber” has no site privileges by default (other than managing their site profile), however, it could be useful to allow comments on pages for “Subscribers” only, thereby allowing feedback from selected peers only.

Add Users

Add Teacher

Your Teacher/Tutor may require you to add them as an “Administrator User” so that they can make changes to your site. To do this, follow the above mentioned instructions.

Once your teacher has clicked the confirmation email link then your site will come up in your Teacher’s StudentSites “Dashboard”.

Add Group Members

If you are building a site as a group project then it may be appropriate to add the other members of your group as “Administrators” or perhaps you could grant them lessor privileges with another “User Roles” such as “Editor“, “Author” or “Contributor“

Features & Tools

StudentSites has a collection of addon features and tools specifically tailored for the creation of educational websites. Some of these features are available through the “Blocks” on the page editor and some only from the “Dashboard”.

Table of Contents

All pages by default generate a Table of Contents (TOC) like the one at the top right on this page. The TOC is based on “Headings” (H1 to H6) but only if there are a minimum of three different Headings eg. H1, H2 and H3. The numbering and indentation is automatic based on heading hierarchy and sequential order on the page.

TOC can be disabled, for a particular page, in Document Settings on the right hand side of page creation, down the bottom using the “Disable TOC”

Top of Page Button

The “Top of Page Button” will automatically appear in the bottom left corner, after the user begins to scroll down the page. If the user clicks this they go back to the top of the page. This is very useful for very long pages.

Photo Gallery

Image file types should be “.JPG” or “.PNG”. If you have “.jfif” images just rename them as “.jpg” to upload them, for example rename “horses.jfif” to “horses.jpg” before uploading

Use the “Photo-Gallery” Dashboard tool to create your galleries then from your page editor simply select the “Photo-Gallery” block and use the drop down menu to select your desired gallery that you previously created. There are a huge variety of stunning dynamic gallery display options.

Image Hotspot

Using the “Image Hotspot” Dashboard tool, import your image (suggest:300 to 600 pixels wide) and your pin image (suggest:10-50 pixels wide and no background). Add information to your pins and set the “hover” action then copy the shortcode and paste it into your page editor using the “Short-Code” block or just type it in the paragraph Block. Your imagehotspot will show on the actual rendered page but in the editor.

Google Maps

From the page editor select the “Map” block and set the box inputs for address, zoom and height, to create your Google Map embed as below.

Quiz

Full user documentation for Quiz Maker. To create a Quiz start with the “Quiz Maker” Dashboard tool by making your questions and assembling a Quiz which you then insert in your page editor using the “Quiz Maker” Block.

Results are available once people have completed the Quiz from your site from the “Quiz Maker” Dashboard Tool under “Results” which can also be exported in various formats to Microsoft Excel. Surveys can be created by setting the points not to count. There are detailed settings available from the Dashboard Tool. There are two default Quizzes which are shown below.

0%

0 votes, 0 avg

4

You have 1 minutes to pass to the quiz.

---

Created on April 29, 2020

CELEBRITIES

How well you know the celebrities

1 / 3

Who is in the picture?

Mark Zuckerberg

Bill Gates

Winston Churchill

Elon Musk

2 / 3

Do you know him?

Steve Jobs

Robert De Niro

Elon Musk

Mark Zuckerberg

3 / 3

Select right answer?

Steve Jobs

Clint Eastwood

Elon Musk

Bill Gates

Please fill in empty fields

Your score is

The average score is 41%

LinkedIn Facebook Twitter

0%

Restart

Did you like this quiz

Send feedback

/3

0 votes, 0 avg

1

Created on April 29, 2020

MATHEMATIC QUIZ

Math quiz helps us to increase our knowledge

1 / 3

10+20

30

40

50

2 / 3

150/3

60

50

100

3 / 3

5*40

300

100

200

Your score is

LinkedIn Facebook Twitter

0%

Restart

Please rate this quiz

Send feedback

Poll

The “Poll” Tool on the Dashboard allows you to create single questions concerning people’s views and they don’t have wrong or right answers. Consult the “Poll” user manual for full details, however it is quite easy to use. Firstly, create your polls with the Dashboard Poll Tool. Secondly, insert your poll into your page using the page editor and the “Poll” Block. Thirdly, results can be viewed after people have done the Poll on your site from your Poll Dashboard Tool. Polls can be exported and imported. There are two default polls which are shown below.

Image Slider

Create your “Image Slider” (AYS Slider) using the Dashboard Tool then copy it’s shortcode and paste it into your page editor with the “Shortcode” block as shown below or just type it in the paragraph Block.

Sunest in big city

Lake

City

Nature

Beautiful waterfall

Garden

Night city

Sea

Nature in mountain

Rocks

Photograph

PopUps

Create your own custom PopUps using the “PopupBox” Dashboard Tool. Select the style and configure the settings or disable if you don’t want it on your site. The PopupBox can have images, text, shortcodes, custom html or embeds if you desire and are highly customisable. PopupBox Documentation.

Use the Dashboard Tool to create the PopupBox then copy it’s shortcode and paste it into your page editor with the “Shortcode” block or just type it in the paragraph Block.

Note that some browsers disable popups by default so you will need to check that you have popups enabled in your browser settings in order to allow the popup to function. Your site viewers will not see the popup if they have disabled popups in their browser. Checkout how to turn popups on/off.

F.A.Q. Builder

Use the “F.A.Q. Builder” Dashboard Tool to create the FAQ using your set of questions and answers. Insert the FAQ into your page using the page editor “FAQ Builder” Block. An example of the FAQ is shown below.

Recipe Cards

Create a professional foodie site with “Recipe Card” or use for hospitality, health or science assignments. The default settings in the Dashboard Tool for “Recipe Card” will work fine, however, they can be fine tuned to your desired preferences.

Insert “Recipe Card” elements, as shown below, from your page editor using the “Recipe Card” Blocks and fill in the details in the settings boxes. Results will only render on the published site not the editor page.

MaxButtons

WordPress comes with its own default button but it is quite limited so we added “MaxButtons” which allows you to easily create customised buttons.

Using the “MaxButtons” Dashboard Tool “Add New” then customise the settings and using its Shortcode add it to your page either using the Shortcode Block in the page editor or just type it in the paragraph Block. MaxButtons documentation.

Features ScratchLink Robotics Goto HomePage

News Tickers

Visualizer

Use the “Visualizer” (US spelling) Dashboard Tool to create the table or chart with your data and desired settings then insert the Shortcode (highlighted in the graphic below) into your page using the “Visualizer” Block in the page editor.

Advanced iFrames

Embedding “iFrames” creates a type of portal to another site within your page. Videos, 3D models and Scratch games etc can be “iFramed” by getting the code generated from the host site. The advantage of “iFrames” is that the user doesn’t leave your site so it’s a better user experience.

Advanced iFrame Pro block tool must be used to embed iFrames into your page as described below (or use the shortcodes directly). Please note that WordPress will strip out any iFrame code that you directly insert into your page html code for security reasons. Only use https websites for iframes

BUG NOTE: To select the Advanced iFrame Block in your page editor after you have inserted it requires you to hover and click the very top edge as in the photo below.

Scratch Animation

Get the iframe embed code from the site that you’d like to embed for example a Scratch Game:

<iframe src="https://scratch.mit.edu/projects/393036536/embed" allowtransparency="true" width="485" height="402" frameborder="0" scrolling="no" allowfullscreen></iframe>

Copy only the https URL itself i.e. from the above example:

https://scratch.mit.edu/projects/393036536/embed

Paste the https URL into the URL box on the right hand side of Advanced iFrame block and it should render automatically.

If you want to delete the iframe you will have to use the three dots “more tools and options” and go to the code editor and manually delete the code and then go back to the visual editor.

If you want advanced settings to display the iframe then you will have to research that using the “Advanced iFrame Pro” tool in the Dashboard menu.

Crosswordlabs.com

STEP 1: Create a list of words and their matching clues in the format “Word” space “Clue for the word”

Word Clue for the word
DOG Man's best friend (example)
DIGITAL can be 0/1 or high/low (another example)

You could use your text book glossary or dictionary.com

In this example, a Digital Technology Glossary (Word Document) was used to create a list of words and clues in Notepad which is shown below.

CAPTCHA A graphic image (and audio for vision impaired) recognition test to confirm a human, rather than a computer­automated response to a request
CSS cascading style sheets
algorithm Step­by­step procedures required to solve a problem
digital footprint A total set of data left behind by a person using a digital system.
FTP A set of rules or standards for transmitting files between digital systems on the internet file transfer protocol
HTML One of the first coding systems (or languages) designed to be used for web­page files so that an internet browser can efficiently display a page and elements for that page such as text, links and media in the intended position. hypertext markup language
iteration A repetition of a process or set of instructions in computer programming where each repeated cycle builds on a previous
malware Malicious software designed to interfere with the regular operation of a computer system
protocol A set of generally accepted standards or 'rules' that govern relationships and interactions between and within information systems
pixel A physical point in a bitmap image or on a display device that corresponds to the smallest amount of information that can be stored and accessed

STEP 2: Create crossword at https://crosswordlabs.com/ (no sign in required) by pasting the above words and clues as shown below:

STEP 3: Press the “save” button and the crossword will be generated as shown below.

STEP 4: Click the “embed your puzzle” link, as shown above and the iframe embed code will be generated as shown below.

Copy only the URL itself which in this example would be:

https://crosswordlabs.com/embed/digital-tech-1

STEP 5: Paste the embed URL into a “Advanced iFrame Pro” block in your StudentSites page and publish then view, after which you should have an embedded crossword like the one below that you can do and it will mark your answers etc.

Puzzel.org

You will need to make a free account at https://puzzel.org/ to create and embed puzzles, however, they have a huge array of great puzzles to create. The free account carries advertising along with the embed while the paid account does not. An example of a word search is below. Note that it is actually possible using Advanced iFrame Pro to remove the advertising but that is beyond the scope of this guide.

WillyWeather

To embed WillyWeather for your desired location go to the WillyWeather Widget Creator and copy the URL and paste into URL box as above. The URL for the embed below is:

https://www.willyweather.com.au/qld/sunshine-coast/rainbow-beach.html

CodeMirror Blocks

CodeMirror is a code editor and syntax checker for over 100 languages with autocompletion. It allows you to create and display your code on your site plus you can actually run Javascipt and HTML code and have it render live on your page.

Use the “CodeMirror” Block in the page editor to insert into your page and control the settings with the “CodeMirror” Dashboard Tool.

HTML- Create & Run

Shown below is a “CodeMirror” Block with HTML code that creates lists. Click the “play” button i.e. triangle within circle button to execute the HTML code directly on the page. Try it now.

<!DOCTYPE html>
<html>
<body>

<h2>An Unordered HTML List</h2>

<ul>
  <li>Coffee</li>
  <li>Tea</li>
  <li>Milk</li>
</ul>  

<h2>An Ordered HTML List</h2>

<ol>
  <li>Coffee</li>
  <li>Tea</li>
  <li>Milk</li>
</ol> 

</body>
</html>

JavaScript- Create & Run

Example 1: Use JavaScript to create a date and time button in HTML using the “CodeMirror” Block- press the “play” button in top right.

<!DOCTYPE html>
<html>
<body>

<h2>My First JavaScript</h2>

<button type="button"
onclick="document.getElementById('demo').innerHTML = Date()">
Click me to display Date and Time.</button>

<p id="demo"></p>

</body>
</html> 

Example 2: Create a fractal animation with JavaScript- press the “play” button in top right.

<html>
<body>
<canvas id="myCanvas" width="800" height="800"></canvas>
<script>
var creal = -.8
var cimag = .156;
var canvas = document.getElementById('myCanvas');
var context = canvas.getContext('2d');
var frame = 0;
 
var pallette=[]; //an array that stores the RGB combinations
 
function julia()
{
        for(y=0;y<200;y++)
                {
                for(x=0;x<200;x++)
                        {
                        var cx=-2+x/50;
                        var cy=-2+y/50;
                        var i = 0;
 
                        do
                                {
                                xt=cx*cx-cy*cy+creal;
                                cy=2*cx*cy+cimag;
                                cx=xt;
                                i++;
                                }
                        while ((cx*cx+cy*cy<4)&&i<25);
                        context.beginPath();
                        context.rect(x*4, y*4, 4, 4);
                        context.fillStyle = pallette[i];
                        context.fill();
                        }
                }
        frame++;
        creal=-.8+.6*Math.sin(frame/(3.14*20));
        cimag=.156+.4*Math.cos(frame/(3.14*40));
        
}
 
for(x=0;x<9;x++) // this loop populates the color pallette array
        {
        color=(31*x).toString(16); // convert the number to hex
        if(color.length==1) color='0'+color;  // add a zero in front if only one hex digit
        pallette[x]="#"+color+color+'ff'; // colors 0-8: the Red and Green components change, Blue=FF
        pallette[x+8]='#00ff'+color;      // colors 8-16: the Blue component changes, Red and Green=FF
        pallette[17+x]="#"+color+'0000';  // colors 17-25: the Red component changes, Green and Blue=0
        }
 
a=setInterval(julia,100);
 
</script>
</body>
</html>

CSS- Create & Run

<!DOCTYPE html>
<html>
<head>
<style>
p.dotted {border-style: dotted;}
p.dashed {border-style: dashed;}
p.solid {border-style: solid;}
p.double {border-style: double;}
p.groove {border-style: groove;}
p.ridge {border-style: ridge;}
p.inset {border-style: inset;}
p.outset {border-style: outset;}
p.none {border-style: none;}
p.hidden {border-style: hidden;}
p.mix {border-style: dotted dashed solid double;}
</style>
</head>
<body>

<h2>The border-style Property</h2>
<p>This property specifies what kind of border to display:</p>

<p class="dotted">A dotted border.</p>
<p class="dashed">A dashed border.</p>
<p class="solid">A solid border.</p>
<p class="double">A double border.</p>
<p class="groove">A groove border.</p>
<p class="ridge">A ridge border.</p>
<p class="inset">An inset border.</p>
<p class="outset">An outset border.</p>
<p class="none">No border.</p>
<p class="hidden">A hidden border.</p>
<p class="mix">A mixed border.</p>

</body>
</html>

School Calendar

The School Calendar tool must be configured using the “settings” tab for “School Calendar” in your “Dashboard”. The page that you wish the calendar to appear needs to be selected from the drop down menu – you don’t insert it with a “Block” from the page editor.

The School Calendar is inserted at the bottom of the selected page. You can only have one School Calendar per website.