Digital Portfolio

Student Name – 7DGS – Term 1 2020

3D Modelling

The following 3D models are my original work created using TinkerCAD cloud 3D modelling based on provided specifications. The resulting “stl” files were “sliced” using Cura engine which produced the “gcode” for the 3D printer.


Design Task: Create a customised ring to fit one of your fingers that is sutiable for 3D Printing. This ring has an outer diameter of 28mm and an I.D. of 22mm and a wall thickness of 3mm. Download Ring STL 3D model file.

Ring 3D Model

Name Badge

Design Task: Create a Name Badge suitable for 3D printing approximately 70mm x 35mm x 4mm.

put your description here including file download link:

Put your image here.


Design Task: Create a cup/mug/goblet no larger than 80mm cubed suitable for 3D printing.

TinkerCAD Code Blocks

Axis Animation

Badge Animation

Scratch Games



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.


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.



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%




Math quiz helps us to increase our knowledge

1 / 3


2 / 3


3 / 3


Your score is


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.


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.

What is F.A.Q?

Frequently asked questions (FAQ), also Questions and Answers (Q&A), are listed questions and answers, all supposed to be commonly asked in some context, and pertaining to a particular topic. The format is commonly used on email mailing lists and other online forums, where certain common questions tend to recur.

A great FAQ page is one of the most important elements of your business website. … Your FAQ section needs to include high-quality content that will help your customers understand your products and services quickly. This means that your FAQ page can play a central role in driving your audience to paying customers.

10 tips for writing the perfect FAQ

1. Answer the question.
2. Only create a FAQ if it really is a Frequently Asked Question. …
3. Create a question, not a statement.
4. Make it concise and to the point. …
5. Don’t create too many questions. …
6. Order questions by importance. …
7. Keep the answer up-to-date, remove redundant questions.

FAQ means “Frequently Asked Question” So now you know – FAQ means “Frequently Asked Question” – don’t thank us. YW! What does FAQ mean? FAQ is an acronym, abbreviation or slang word that is explained above where the FAQ definition is given.

FAQ stands for ‘Frequently asked questions’, with the plural being implicit in the acronym FAQ. But it is common to see the word ‘FAQs’ being used, which treat the word FAQ as an object in itself, and an s being added to its end in order to pluralize it.

Google F.A.Q

We know security and privacy are important to you – and they are important to us, too. We make it a priority to provide strong security and give you confidence that your information is safe and accessible when you need it. We’re constantly working to ensure strong security, protect your privacy, and make Google even more effective and efficient for you. We spend hundreds of millions of dollars every year on security, and employ world-renowned experts in data security to keep your information safe. We also built easy-to-use privacy and security tools like Google Dashboard, 2-step verification and Ads Settings. So when it comes to the information you share with Google, you’re in control.

Google search results are a reflection of the content publicly available on the web. Search engines can’t remove content directly from websites, so removing search results from Google wouldn’t remove the content from the web. If you want to remove something from the web, you should contact the webmaster of the site the content is posted on and ask him or her to make a change. Once the content has been removed and Google has noted the update, the information will no longer appear in Google’s search results. If you have an urgent removal request, you can also visit our help page for more information.

In some cases, yes. When you click on a search result in Google Search, your web browser also may send the Internet address, or URL, of the search results page to the destination webpage as the Referrer URL. The URL of the search results page may sometimes contain the search query you entered. If you are using SSL Search (Google’s encrypted search functionality), under most circumstances, your search terms will not be sent as part of the URL in the Referrer URL. There are some exceptions to this behavior, such as if you are using some less popular browsers. More information on SSL Search can be found here. Search queries or information contained in the Referrer URL may be available via Google Analytics or an application programming interface (API). In addition, advertisers may receive information relating to the exact keywords that triggered an ad click.

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.


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.

News Tickers

[ditty_news_ticker id=”1659″]


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

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:


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.


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:


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.


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.


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:


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>

<h2>An Unordered HTML List</h2>


<h2>An Ordered HTML List</h2>



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>

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


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

<canvas id="myCanvas" width="800" height="800"></canvas>
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()
                        var cx=-2+x/50;
                        var cy=-2+y/50;
                        var i = 0;
                        while ((cx*cx+cy*cy<4)&&i<25);
                        context.rect(x*4, y*4, 4, 4);
                        context.fillStyle = pallette[i];
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

CSS- Create & Run

<!DOCTYPE html>
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;}

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


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.