Z_default_content

Features & Examples

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.

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

Use the “Gallery” Common Block 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 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.

Click here to edit the advanced iframe block.

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

An example of a WebSite Menu

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 anAdministrator” 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

To add a new “User” to your site (who must be an existing StudentSites subscriber) click on the “Add Existing” button under the “Users” Menu on the “Dashboard”.
Input the email of the desired new “User” and select their “Role” with the drop down menu then click “Add Existing User” after which they will receive a confirmation email link and after they confirm by clicking the link then they will be added as a “User” to your site.

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

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.

Page editor view of the “Image Hotspot” Shortcode.

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

CELEBRITIES

How well you know the celebrities

1 / 3

Who is in the picture?

Question Image

2 / 3

Do you know him?

Question Image

3 / 3

Select right answer?

Question Image

Your score is

The average score is 0%

0%

0

MATHEMATIC QUIZ

Math quiz helps us to increase our knowledge

1 / 3

5*40

2 / 3

10+20

3 / 3

150/3

Your score is


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.

Default choosing

Did you like our plugin?

Default rating

Did you like our plugin?


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.


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.

F.A.Q with id 2 does not exist. F.A.Q with id 1 does not exist.

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.

Shortcodes for MaxButtons is pasted into page editor.

Features ScratchLink Robotics Goto HomePage


News Tickers

This is a News Ticker – many things like buttons and links can be placed in the ticker- Use the “News Ticker” Dashboard Tool to create your Ticker and then paste the Shortcode into your page.

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.

Various tables and graphs are available.

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

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.

Click here to edit the advanced iframe block.

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.

Click here to edit the advanced iframe block.

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.

Click here to edit the advanced iframe block.

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
Click here to edit the advanced iframe block.

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.