In the Smart Sparrow platform an iFrame acts as a window to another website and gives you all the functionality of that website, but keeps students inside the lesson rather than directing them to view the website in another tab or window.
An iFrame can be used to add a Slice image or annotation layer to a Smart Sparrow lesson.
To do this, watch our short YouTube video or scroll for step-by-step instructions.
Using an iFrame
- Go to the INSERT ribbon and click iFrame. This will insert a standard sized iFrame onto your screen.
- Resize the iFrame to fit your activity.
3. While clicked on the iFrame, add the URL for the Slice image in the Source box in the SELECTION ribbon.
4. PREVIEW the screen to see if any changes are required. For Slice images, this may involve going back to the original image to re-position the image on the screen or zoom in or out. Also consider using the full screen mode to remove the information panel on the left if you don’t have important information held there.
Using an iFrame inside a pop up box
As an alternative way of adding a Slice image, an iFrame can be added inside a pop-up box. This gives you more control over what appears in the iFrame and gives you the chance to hide part of the website.
- Insert a pop up.
- Edit the pop up icon as required and consider selecting “Use Toggle behaviour”
- Triple click on the pop up icon to bring up the pop up box.
- Resize as required.
- Edit the pop up window and insert an iFrame making it cover the entire pop up box.
- Enter your source URL and close.
- PREVIEW the screen to see what is visible in the pop up box.
If you are aiming to hide navigation controls or information on part of the screen you can (using trial and error) move the iFrame past the edge of the pop up box so that the information is lost off the top, bottom, left or right edges of the pop up box. This may require several attempts previewing each time to set up the screen as you wish. Continue to stretch out the other sides of the iFrame so it still covers the entire pop up box.
To use an invisible pop up over one of your own images change the URL of the pop up box to: https://smartsparrow.global.ssl.fastly.net/repo/icons/blank_template.png
These steps are explained in the video above. Once you have an iFrame positioned correctly in a pop up box you can reuse that same pop up icon for other pages on the same website by replacing the Source URL without needing to adjust the iFrame position.
Viewing two Slice images at once using an iFrame inside a pop up box
By using two iFrames inside the one pop up box you can allow students to view two Slice images at once. In the template example we’ve shared on the BEST Courseware page you’ll see we have an image showing two microscopic slides of lung tissue and a pop up box that is shaped to look like a magnifying glass. When the pop up box is opened two iFrames sit next to each other and two Slice images can be viewed and moved at the same time. To use this icon in your own classes, take a copy of the tutorial from the BEST Courseware page using the TEACH WITH THIS button and copy and paste the icon into your own lesson and update the URLs of the two iFrames to your own images.
Using another website inside an iFrame
Each website will appear differently in an iFrame with different amounts of content visible. It may take some experimenting to see how the content is best displayed and whether the site is viewable within the iFrame. iFrames will only work with secure websites (HTTPS).
If you are keen to try using iFrames with a Slice image and have any questions, you can contact me at email@example.com and I’ll be happy to help.