Navigate to the Theme section in your Blogger dashboard, click on "Customize," then select "Edit HTML." Paste the following code just after the <head> tag and save the template. If you have already done this step for any of other widget on your site then skip it. You only need to do this once for all widgets.
Step 2: Paste following html code where you want this widget to appear. Of course the content of your selection etc.
<div class="lesson-slider" id="lessonSlider">
<div class="lesson-slides">
<div class="lesson-slide current">
<h2>Slide 1: Prospero's Goal and the Start of the Play</h2>
<p>
Prospero's wish to return to Italy and reclaim his position as Duke of Milan drives the plot of The Tempest. However, we only learn about Prospero’s past in the second scene. The play begins with immediate action, placing the audience in the middle of a storm on a ship. By starting in chaos, Shakespeare uses the literary technique “<em>in medias res</em>,” engaging the audience immediately. We meet Prospero in the second scene, discovering he created the storm to shipwreck his enemies on the island, which sets the plot in motion.
</p>
<ul>
<li><em>Goal:</em> Reclaim his position as Duke of Milan</li>
<li><em>Technique:</em> In medias res</li>
<li><em>Action:</em> Creates a storm to shipwreck enemies</li>
</ul>
</div>
<div class="lesson-slide">
<h2>Slide 2: Prospero's Backstory and Motivation</h2>
<p>
In the second scene, we learn that Prospero was the Duke of Milan until his brother Antonio, with Alonso, King of Naples, conspired to overthrow him. With Gonzalo's help, Prospero escaped and has lived on the island for twelve years with his daughter Miranda and slave Caliban. Prospero reveals this to Miranda in Act I, Scene 2. To reclaim his position, Prospero must resolve the conflict with Antonio, a theme that drives the play towards separation and reunion.
</p>
<ul>
<li><em>Backstory:</em> Overthrown by brother Antonio</li>
<li><em>Allies:</em> Escaped with Gonzalo's help</li>
<li><em>Time on Island:</em> Twelve years</li>
<li><em>Motivation:</em> Resolve conflict with Antonio</li>
</ul>
</div>
<div class="lesson-slide">
<h2>Slide 3: The Aftermath of the Shipwreck</h2>
<p>
The storm separates the ship’s crew into three groups: Ferdinand is alone and meets Prospero and Miranda; Alonso, Sebastian, Antonio, and Gonzalo are on another part of the island; Trinculo and Stephano end up elsewhere. This separation mirrors Prospero's isolation. The crew, like Prospero, is cut off from their loved ones, believing they have perished. Prospero, using his spirits, further disorients his enemies. His intentions become clearer as he guides them towards his camp for a reunion and resolution.
</p>
<ul>
<li><em>Groups Separated:</em> Ferdinand, Alonso's group, Trinculo and Stephano</li>
<li><em>Mirrors:</em> Prospero's own isolation</li>
<li><em>Disorientation:</em> Prospero uses spirits</li>
<li><em>Goal:</em> Guide towards reunion and resolution</li>
</ul>
</div>
<div class="lesson-slide">
<h2>Slide 4: Prospero’s Confrontation and Resolution</h2>
<p>
The play’s climax occurs when Prospero confronts Alonso and Antonio. He accuses them of their past betrayal and manipulates their emotions by claiming to have lost his daughter in the storm. Alonso, mourning his son Ferdinand, forms an emotional bond with Prospero. After Alonso restores Prospero’s dukedom, Prospero reveals Ferdinand alive, bringing joy. The play concludes with reconciliation and serenity. Through the experience of separation and reunion, Prospero resolves the conflict and secures his return home, bringing the narrative full circle.
</p>
<ul>
<li><em>Confrontation:</em> Accuses Alonso and Antonio of betrayal</li>
<li><em>Emotional Manipulation:</em> Claims loss of daughter</li>
<li><em>Restoration:</em> Alonso restores Prospero’s dukedom</li>
<li><em>Revelation:</em> Ferdinand is alive</li>
<li><em>Conclusion:</em> Reconciliation and serenity</li>
</ul>
</div>
</div>
<button id="fullscreenButton" class="fullscreen-button" onclick="Fullscreen()">☐</button>
<button id="closeButton" class="close-button" onclick="Fullscreen()">×</button>
<div class="slide-navigation">
<button class="prev" onclick="changeSlide(-1)">‹</button>
<button class="next" onclick="changeSlide(1)">›</button>
</div>
</div>
Place following javascript below the html code
<script>
let slideIndex = 0;
showSlide(slideIndex);
function changeSlide(n) {
showSlide(slideIndex += n);
}
function showSlide(n) {
let slides = document.getElementsByClassName("lesson-slide");
if (n >= slides.length) {
slideIndex = 0;
}
if (n < 0) {
slideIndex = slides.length - 1;
}
for (let i = 0; i < slides.length; i++) {
slides[i].classList.remove('current');
}
slides[slideIndex].classList.add('current');
}
function Fullscreen() {
let slider = document.getElementById("lessonSlider");
let fullscreenButton = document.getElementById("fullscreenButton");
let closeButton = document.getElementById("closeButton");
if (!document.fullscreenElement) {
if (slider.requestFullscreen) {
slider.requestFullscreen();
} else if (slider.mozRequestFullScreen) { // Firefox
slider.mozRequestFullScreen();
} else if (slider.webkitRequestFullscreen) { // Chrome, Safari and Opera
slider.webkitRequestFullscreen();
} else if (slider.msRequestFullscreen) { // IE/Edge
slider.msRequestFullscreen();
}
fullscreenButton.style.display = "none";
closeButton.style.display = "block";
} else {
if (document.exitFullscreen) {
document.exitFullscreen();
} else if (document.mozCancelFullScreen) { // Firefox
document.mozCancelFullScreen();
} else if (document.webkitExitFullscreen) { // Chrome, Safari and Opera
document.webkitExitFullscreen();
} else if (document.msExitFullscreen) { // IE/Edge
document.msExitFullscreen();
}
fullscreenButton.style.display = "block";
closeButton.style.display = "none";
}
}
document.addEventListener("fullscreenchange", () => {
let fullscreenButton = document.getElementById("fullscreenButton");
let closeButton = document.getElementById("closeButton");
let slider = document.getElementById("lessonSlider");
if (document.fullscreenElement) {
fullscreenButton.style.display = "none";
closeButton.style.display = "block";
slider.classList.add("fullscreen");
} else {
fullscreenButton.style.display = "block";
closeButton.style.display = "none";
slider.classList.remove("fullscreen");
}
});
</script>
Below is a demo
Slide 1: Prospero's Goal and the Start of the Play
Prospero's wish to return to Italy and reclaim his position as Duke of Milan drives the plot of The Tempest. However, we only learn about Prospero’s past in the second scene. The play begins with immediate action, placing the audience in the middle of a storm on a ship. By starting in chaos, Shakespeare uses the literary technique “in medias res,” engaging the audience immediately. We meet Prospero in the second scene, discovering he created the storm to shipwreck his enemies on the island, which sets the plot in motion.
Goal: Reclaim his position as Duke of Milan
Technique: In medias res
Action: Creates a storm to shipwreck enemies
Slide 2: Prospero's Backstory and Motivation
In the second scene, we learn that Prospero was the Duke of Milan until his brother Antonio, with Alonso, King of Naples, conspired to overthrow him. With Gonzalo's help, Prospero escaped and has lived on the island for twelve years with his daughter Miranda and slave Caliban. Prospero reveals this to Miranda in Act I, Scene 2. To reclaim his position, Prospero must resolve the conflict with Antonio, a theme that drives the play towards separation and reunion.
Backstory: Overthrown by brother Antonio
Allies: Escaped with Gonzalo's help
Time on Island: Twelve years
Motivation: Resolve conflict with Antonio
Slide 3: The Aftermath of the Shipwreck
The storm separates the ship’s crew into three groups: Ferdinand is alone and meets Prospero and Miranda; Alonso, Sebastian, Antonio, and Gonzalo are on another part of the island; Trinculo and Stephano end up elsewhere. This separation mirrors Prospero's isolation. The crew, like Prospero, is cut off from their loved ones, believing they have perished. Prospero, using his spirits, further disorients his enemies. His intentions become clearer as he guides them towards his camp for a reunion and resolution.
Groups Separated: Ferdinand, Alonso's group, Trinculo and Stephano
Mirrors: Prospero's own isolation
Disorientation: Prospero uses spirits
Goal: Guide towards reunion and resolution
Slide 4: Prospero’s Confrontation and Resolution
The play’s climax occurs when Prospero confronts Alonso and Antonio. He accuses them of their past betrayal and manipulates their emotions by claiming to have lost his daughter in the storm. Alonso, mourning his son Ferdinand, forms an emotional bond with Prospero. After Alonso restores Prospero’s dukedom, Prospero reveals Ferdinand alive, bringing joy. The play concludes with reconciliation and serenity. Through the experience of separation and reunion, Prospero resolves the conflict and secures his return home, bringing the narrative full circle.
Confrontation: Accuses Alonso and Antonio of betrayal
Emotional Manipulation: Claims loss of daughter
Restoration: Alonso restores Prospero’s dukedom
Revelation: Ferdinand is alive
Conclusion: Reconciliation and serenity
Post a Comment
We use cookies to understand preferences and optimize your experience using our site, this includes advertising affiliated with Google.
