Drag and drop an image into an empty box
CSS
img {
width:190px;
height:auto;
}
.droptarget {
width: 200px;
height: 220px;
padding: 10px;
border: 1px solid black;
}
HTML
<div class="box" ondrop="drop(event)" ondragover="allowDrop(event)">
<img src="pic1.png" draggable="true" ondragstart="drag(event)" id="drag1" width="88" height="31">
</div><br>
<div class="box" ondrop="drop(event)" ondragover="allowDrop(event)"></div>
JAVASCRIPT
function allowDrop(ev) {
ev.preventDefault();
}
function drag(ev) {
ev.dataTransfer.setData("text", ev.target.id);
}
function drop(ev) {
ev.preventDefault();
var data = ev.dataTransfer.getData("text");
ev.target.appendChild(document.getElementById(data));
}
Drag, drop and override
CSS
img {
width:190px;
height:auto;
}
.droptarget {
width: 200px;
height: 220px;
padding: 10px;
border: 1px solid black;
}
HTML
<img id="image1" src="pic1.png" alt="Image 1">
<img id="image2" src="pic2.png" alt="Image 2">
JAVASCRIPT
// Get the elements we'll need
var image1 = document.getElementById("image1");
var image2 = document.getElementById("image2");
// Make image1 draggable
image1.setAttribute("draggable", true);
// Add event listeners for the dragstart, dragover, and drop events
image1.addEventListener("dragstart", dragStart);
image2.addEventListener("dragover", dragOver);
image2.addEventListener("drop", drop);
// Function to handle the dragstart event
function dragStart(ev) {
ev.dataTransfer.setData("text", ev.target.id);
}
// Function to handle the dragover event
function dragOver(ev) {
ev.preventDefault();
}
// Function to handle the drop event
function drop(ev) {
ev.preventDefault();
var data = ev.dataTransfer.getData("text");
ev.target.appendChild(document.getElementById(data));
}
Drag and drop and swap image
CSS
.img {
width:190px;
height:auto;
}
.droptarget {
width: 200px;
height: 220px;
padding: 10px;
border: 1px solid black;
}
HTML
<div class="droptarget" ondrop="drop(event)" ondragover="dragOver(event)">
<p ondragstart="dragStart(event)" draggable="true" id="dragtarget">
<img class="img" id="image1" src="pic1.png" alt="Image 1">
</p>
</div><br>
<div class="droptarget" ondrop="drop(event)" ondragover="dragOver(event)">
<img class="img" id="image2" src="pic2.png" alt="Image 2" style="display:none">
</div>
JAVASCRIPT
// Get the elements we'll need
var image1 = document.getElementById("image1");
var image2 = document.getElementById("image2");
// Make image1 draggable
image1.setAttribute("draggable", true);
// Add event listeners for the dragstart, dragover, and drop events
image1.addEventListener("dragstart", dragStart);
image2.addEventListener("dragover", dragOver);
image2.addEventListener("drop", drop);
// Function to handle the dragstart event
function dragStart(ev) {
ev.dataTransfer.setData("text", ev.target.src);
}
// Function to handle the dragover event
function dragOver(ev) {
ev.preventDefault();
}
// Function to handle the drop event
function drop(ev) {
ev.preventDefault();
image2.style.display = "block";
}
Rearrange
CSS
.mover {
width:60px;
height:4em;
line-height:4em;
margin:10px;
padding:5px;
float:left;
background:#ffff99;
border:1px dotted #333333;
text-align:center;}
HTML
<div><em>Move the words around to make a sentence.</em></div>
<div id="box1" ondragover="event.preventDefault()" ondrop="dropWord(event)">
<div class="mover" draggable="true" ondragstart="dragWord(event)">is</div>
</div>
<div id="box2" ondragover="event.preventDefault()" ondrop="dropWord(event)">
<div class="mover" draggable="true" ondragstart="dragWord(event)">This</div>
</div>
<div id="box3" ondragover="event.preventDefault()" ondrop="dropWord(event)">
<div class="mover" draggable="true" ondragstart="dragWord(event)">book</div>
</div>
<div id="box4" ondragover="event.preventDefault()" ondrop="dropWord(event)">
<div class="mover" draggable="true" ondragstart="dragWord(event)">a</div>
</div>
</div>
JAVASCRIPT
function dragWord(dragEvent){
dragEvent.dataTransfer.setData("text/html", dragEvent.target.textContent+"|"+dragEvent.target.parentNode.id);
}
function dropWord(dropEvent){
var dropData = dropEvent.dataTransfer.getData("text/html");
var dropItems = dropData.split("|");
var prevElem = document.getElementById(dropItems[1]);
prevElem.getElementsByTagName("div")[0].textContent = dropEvent.target.textContent;
dropEvent.target.textContent = dropItems[0];
dropEvent.preventDefault();
}
Fill in the blanks with grading
CSS
.form-control:valid {
color:green;
border-color:green;
}
.form-control:invalid {
color:red;
border-color:red;
}
.form-control {
font-size: 20px;
text-transform: capitalize; /*capitalizes the first letters*/
}
.form-label{
font-size:20px;
}
HTML
<form id="quiz-form">
<p>
<div class="row">
<div class="col">
<button type="button" class="btn btn-primary float-end" onclick="playAudio('audio1')">Hint!</button>
<label for="rome" class="form-label">What is the capital of Italy?</label><br>
<input type="text" class="form-control" id="rome" pattern="Rome||rome||ROME" aria-label="First name">
</div>
</p>
<div class="col">
<button type="button" class="btn btn-primary float-end" onclick="playAudio('audio2')">Hint!</button>
<label for="paris" class="form-label">What is the capital of France?</label><br>
<input type="text" class="form-control" id="paris" pattern="Paris||paris||PARIS" aria-label="Last name">
</div>
</div>
</form>
<p id="demo"></p>
<button type="button" id="btn" class="btn btn-success");>Submit</button>
JAVASCRIPT
const element = document.getElementById("btn");
element.addEventListener("click", myFunction);
// Function for the Submit button
function myFunction(){
// An array of the correct answers for each question
let correctAnswers = ["Rome", "Paris"];
// Initialize the score to 0
var score = 0;
// Get all the input fields in the form
let inputs = document.querySelectorAll('#quiz-form input[type="text"]');
// Iterate over the input fields and check the value of each one
for (let i = 0; i < inputs.length; i++) {
if (inputs[i].value.toLowerCase() === correctAnswers[i].toLowerCase()) {
// If the value is correct, increment the score
score++;
}
document.getElementById("demo").innerHTML = "You got " + score + " out of " + inputs.length + " questions right!!!"
}
};
Radio buttons with grading
CSS
form {
font-size:22px;
}
label {
color:blue;
margin-top: 20px;
}
.pad {
margin-top:30px;
}
#demo {
color:red;
font-size: 30px;
background-color:#FFD4CA;
width:300px;
text-align:center;
}
HTML
<div class="form-check">
<form id="quiz">
<label for="question0">What is the capital of Italy?</label><br>
<input type="radio" name="question0" value="a"> Paris<br>
<input type="radio" name="question0" value="b"> London<br>
<input type="radio" name="question0" value="c"> Rome<br>
<label for="question1">What is the capital of England?</label><br>
<input type="radio" name="question1" value="a"> Paris<br>
<input type="radio" name="question1" value="b"> London<br>
<input type="radio" name="question1" value="c"> Rome<br>
<p id="score"></p>
<input class="pad" type="button" value="Submit" onclick="returnScore()">
</form>
</div>
JAVASCRIPT
var answers = ["c","b"],
tot = answers.length;
function getCheckedValue( radioName ){
var radios = document.getElementsByName( radioName ); // Get radio group by-name
for(var y=0; y<radios.length; y++)
if(radios[y].checked) return radios[y].value; // return the checked value
}
function getScore(){
var score = 0;
for (var i=0; i<tot; i++)
if(getCheckedValue("question"+i)===answers[i]) score += 1; // increment only
return score;
}
function returnScore(){
document.getElementById("score").innerHTML = "Your score is "+ getScore() +"/"+ tot;
}
Using comparison operator (?) instead of if...else
HTML
<p id="demo"></p>
JAVASCRIPT
let weather=20;
const weatherstate = weather>30? 'warm weather':'cold weather';
document.getElementById("demo").innerHTML=weatherstate;