Create A Browser-Based Flashcard Application That Displays P ✓ Solved
create a browser-based flashcard application that displays pictures
In this assignment, you must create a browser-based flashcard application. The application should display a picture and four labeled buttons with choices. The user will select an answer, and the application will inform the user whether the choice is correct or incorrect. There should be two additional buttons: "correct answer" to highlight the right choice, and "next" to load the next picture. The page must also display the number of images shown so far and the number of correct answers. The pictures are hosted online; your code must generate the full URL from a list of image filenames. When loading a new picture, the choices should be randomly assigned to buttons, with one being the correct answer and the others distractors. The order of images must be randomized each time the page is loaded, without reordering the list directly.
The application should include at least 20 images, be fully functional, with clear, readable code written in JavaScript. The design should be clean and visually appealing. The scoring should update in real time. The "correct answer" button should always properly highlight the correct choice, even if the user hasn't made a selection. Clicking "next" resets the display to a new image with new choices. The list of images should be stored as URLs or filenames, with your code dynamically constructing the full image URL.
The application is for learning purposes, such as recognizing people's names, objects, or parts of something, and suitable images are available online. Use best coding practices, including proper indentation, semantic HTML, and accessible buttons and labels. Verify that all features work smoothly and that your code is neat and understandable. Your final product should be a working, attractive flashcard quiz that randomly shows images in different orders each reload, with functioning answer buttons, score tracking, and highlighting features.
Sample Paper For Above instruction
body {
font-family: Arial, sans-serif;
margin: 20px;
background-color: #f4f4f4;
text-align: center;
}
flashcard {
margin: 20px auto;
padding: 10px;
background-color: #fff;
max-width: 500px;
border: 2px solid #ccc;
border-radius: 8px;
}
imageContainer {
width: 100%;
height: auto;
}
img {
max-width: 100%;
height: auto;
border: 2px solid #333;
border-radius: 4px;
}
.choices {
margin-top: 15px;
display: flex;
justify-content: space-around;
flex-wrap: wrap;
}
button {
padding: 10px 20px;
margin: 10px;
font-size: 1em;
cursor: pointer;
border-radius: 4px;
border: none;
}
scoreboard {
margin-top: 20px;
}
result {
margin-top: 15px;
font-weight: bold;
font-size: 1.2em;
}
Create a browser-based flashcard application that displays pictures
Images shown: 0
Correct answers: 0
// List of image filenames
const imageFilenames = [
'lion.jpg',
'tiger.jpg',
'elephant.jpg',
'giraffe.jpg',
'zebra.jpg',
'bear.jpg',
'panda.jpg',
'kangaroo.jpg',
'hippo.jpg',
'rhinoceros.jpg',
'lion2.jpg',
'tiger2.jpg',
'elephant2.jpg',
'giraffe2.jpg',
'zebra2.jpg',
'bear2.jpg',
'panda2.jpg',
'kangaroo2.jpg',
'hippo2.jpg',
'rhinoceros2.jpg'
];
const baseUrl = 'https://example.com/images/'; // Replace with actual URL
let imagesOrder = [];
let currentIndex = 0;
let totalImages = imageFilenames.length;
let correctAnswerIndex = 0;
let correctCount = 0;
let imagesShown = 0;
const flashImage = document.getElementById('flashImage');
const choiceButtons = [
document.getElementById('choice1'),
document.getElementById('choice2'),
document.getElementById('choice3'),
document.getElementById('choice4')
];
const imagesCountSpan = document.getElementById('imagesCount');
const correctCountSpan = document.getElementById('correctCount');
const resultDiv = document.getElementById('result');
document.getElementById('showCorrect').addEventListener('click', highlightCorrect);
document.getElementById('next').addEventListener('click', loadNext);
choiceButtons.forEach((btn, index) => {
btn.addEventListener('click', () => selectAnswer(index));
});
function shuffleArray(arr) {
for (let i = arr.length - 1; i > 0; i--) {
const j = Math.floor(Math.random() * (i + 1));
[arr[i], arr[j]] = [arr[j], arr[i]];
}
}
function init() {
// Generate a random order of images
imagesOrder = [...Array(totalImages).keys()];
shuffleArray(imagesOrder);
currentIndex = 0;
correctCount = 0;
imagesShown = 0;
updateScore();
loadImage();
}
function updateScore() {
imagesCountSpan.textContent = imagesShown;
correctCountSpan.textContent = correctCount;
}
function loadImage() {
if (currentIndex >= totalImages) {
alert('You have gone through all images!');
return;
}
const filename = imageFilenames[imagesOrder[currentIndex]];
const fullUrl = baseUrl + filename;
flashImage.src = fullUrl;
resultDiv.textContent = '';
// Generate choices
const correctImageName = filename.split('.')[0]; // Assuming name before extension
const choices = [correctImageName];
// Randomly select distractors
while (choices.length
const randIndex = Math.floor(Math.random() * totalImages);
const distractor = imageFilenames[imagesOrder[randIndex]].split('.')[0];
if (!choices.includes(distractor)) {
choices.push(distractor);
}
}
shuffleArray(choices);
// Assign choices to buttons
choiceButtons.forEach((btn, index) => {
btn.textContent = choices[index];
btn.style.backgroundColor = '';
});
// Store the correct answer position
correctAnswerIndex = choices.indexOf(correctImageName);
// Randomize which button holds the correct answer
// Already done via shuffleArray, so correctAnswerIndex points to correct
}
function selectAnswer(index) {
imagesShown++;
updateScore();
// Check if answer is correct
if (index === correctAnswerIndex) {
correctCount++;
resultDiv.textContent = 'Correct! 🎉';
choiceButtons[index].style.backgroundColor = 'lightgreen';
} else {
resultDiv.textContent = 'Incorrect. Try again!';
choiceButtons[index].style.backgroundColor = 'lightcoral';
}
// Highlight the correct button
highlightCorrect();
// Disable choices after answer
choiceButtons.forEach(btn => btn.disabled = true);
}
function highlightCorrect() {
choiceButtons.forEach((btn, index) => {
if (index === correctAnswerIndex) {
btn.style.backgroundColor = 'gold';
}
});
}
function loadNext() {
// Enable buttons
choiceButtons.forEach(btn => {
btn.disabled = false;
});
// Load next image and choices
currentIndex++;
loadImage();
}
// Initialize on page load
window.onload = init;