CLICK WITCHERY FRIDAY SHOWCASE: Multi-step word problems

We are returning to education for today’s Friday Showcase. This shows how a number of Multi step problems and when you click on one of them you see the answer.

This is very simple presentation where clicking on the problem reveals the solution.
Clicking on http://sys.clickwitchery.com/35 will show this in split screen mode. Hovering over a square with your cursor will show the answer on the right hand side.

Click Witchery Friday Showcase: Bloomsday

Yesterday was Bloomsday. The novel, Ulysses by James Joyce, is set on 16th June 1904. In the 1950’s a group of Irish writers decided to celebrate Joyce by walking in the footsteps of the novel’s hero, Leopold Bloom. This walk included visiting the pubs mentioned in the novel.
Today’s showcase presentation is about Bloomsday. It includes graphics of events such as “Bloomsday marathons” and events celebrating Joyce around the world. It includes a video of the first bloomsday.

Click Witchery Friday Showcase: Dublin’s Rock and Roll wall of fame

Today’s Friday Showcase is a Click Witchery presentation on Dublin’s Rock and Roll wall of fame. This is located at the Irish rock n roll museum in Temple Bar, Dublin.

https://sys.clickwitchery.com/38

When you click on the artist on the wall a video of them performing opens up. We have previously written a blog on adding videos which has useful information on this. http://clickwitchery.com/2016/05/23/adding-videos-to-a-click-witchery-presentation/
I hope you like it!

Click Witchery Friday Showcase: London Underground

Today’s Friday Showcase is a Click Witchery presentation on the London Underground.

One of the problems most tourist have is matching the attractions of London with Underground stations. This map allows you to click on the place symbol beside some of the train stations and get an idea of why you may want to get off the station here and explore.

https://sys.clickwitchery.com/44
This presentation was created by using a map of the central part of the London underground as the central image and using place symbols to mark an interesting spot. When the viewer clicks on the place symbol they see a picture of a local attraction. In the case of Tower Hill, Westminster and Leicester Square we have montages which can be clicked on to see pictures of the attractions.

 

I hope you like it!

Embedding a Click Witchery presentation in your web page!

There are two ways to embed a Click Witchery presentation in a HTML page, iframe and jQuery.

A very effective way is to use the iframe function. To do this, log into https://sys.clickwitchery.com/, create the presentation you want to embed in a HTML page and to the embed option on the left hand side. You will be given the following options which will control what your embedded presentation will look and do.

Field

Description

Type

Whether the embedding method is iframe or jQuery.

Width

This can be a pixel width or a percentage.

height

The height

Right navigation bar

Whether the right navigation bar is visible

Padding

How much padding.

object names

Whether object names are visible.

descriptions of objects

Whether descriptions of objects are visible

The background color of the internal

The background color used internally.

The background color

The background color

 

 

You then just have to select the button “Generate the embed code” and a dialog will appear with the code which you then copy to your HTML page and you have an embedded Click Witchery presentation.

The jQuery option is more powerful than the iframe and slightly more complex to implement. When you select the jQuery you are given more options as you can see below.

embed1

 

Field

Description

Type

Whether the embedding method is iframe or jQuery.

Width

This can be a pixel width or a percentage.

Maximum images height

Maximum height

Keep constant height

Whether the height changes if the page changes

Right navigation bar

Whether the right navigation bar is visible

Minimum width of desktop view

Minimum width

Padding

How much padding.

object names

Whether object names are visible

descriptions of objects

Whether descriptions of objects are visible

Display share buttons

Whether share buttons are visible

The background color of the internal

The background color used internally.

The background color

The background color

 

To add the jQuery to your HTML page you need to add code to the header of the page as well as within the page itself. Select the button “Generate the embed code”. The dialog below will appear.

embed jQuery

You need to copy two sets of code to the header file and one to the body of the page.

In the header section you should add the following line of code:

<script src=”https://code.jquery.com/jquery-2.2.3.min.js”></script>

Followed by these lines of code:

<script src=”https://sys.clickwitchery.com/presentation/jquery.presentation.js”></script>

<link href=”https://sys.clickwitchery.com/presentation/jquery.presentation.min.css” rel=”stylesheet”>

This only needs to be done once on a page.

You then need to copy the code for embed itself. You must have a unique id for each embedded jQuery so you should change the label “presentation-container” to a unique identifier. The code should look something like this:

<div id=”presentation-1234″></div><script>$(document).ready(function() { $(‘#presentation-1234’).presentation({

“presentationId”: “44”,

“displaySidebar”: true,

“displayNames”: true,

“displayDescriptions”: true,

“displayShareButtons”: true,

“internalBackground”: “rgba(255,255,255,1)”,

“externalBackground”: “rgba(255,255,255,1)”

}); });</script>

 

WordPress

If you are using WordPress, you can add the lines to the header file by going to Appearance and then select editor. You should then select the PHP page which is used for your header file. This is usually header.php. The following code should be inserted just below the meta information:

<script src=”https://code.jquery.com/jquery-2.2.3.min.js”></script>

<script src=”https://sys.clickwitchery.com/presentation/jquery.presentation.js”></script>

<link href=”https://sys.clickwitchery.com/presentation/jquery.presentation.min.css” rel=”stylesheet”>

WordPress Editor

I look forward to seeing your embedded Click Witchery presentations. I hope you enjoy creating them!