Meaning
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Word Quiz</title>
<style>
body {
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
text-align: center;
margin: 0;
padding: 0;
margin-top: 130px;
background-color: #000;
color: #fff;
}
#quiz-container {
width: 100%;
max-width: 600px;
margin: auto;
padding: 20px;
box-sizing: border-box;
background-color: #000;
}
h1 {
color:#66c1bb;
font-size: 37px;
font-weight: bold;
color: #4CAF50;
}
p {
color: white;
font-size: 18px;
font-weight: bold;
background-color: #000;
}
#question{
margin-bottom: 20px;
font-size: 58px;
font-weight: bold;
color: #fff;
}
#options {
display: flex;
flex-direction: column;
align-items: center;
}
button {
padding: 15px 30px;
margin: 10px;
cursor: pointer;
font-size: 18px;
background-color: #333;
color: #fff;
border: none;
border-radius: 5px;
transition: background-color 0.3s ease;
}
button:hover {
background-color: #555;
}
/* Modal styles */
#myModal {
display: none;
position: fixed;
z-index: 1;
left: 0;
top: 0;
width: 100%;
height: 100%;
overflow: auto;
background-color: rgb(0,0,0);
background-color: rgba(0,0,0,0.4);
padding-top: 230px;
}
.modal-content {
background-color: black;
margin: 5% auto;
padding: 20px;
border: 1px solid #888;
width: 80%;
margin-bottom: 600px;
text-align: center;
}
.close {
color: #aaa;
float: right;
font-size: 28px;
font-weight: bold;
}
.close:hover,
.close:focus {
color: black;
text-decoration: none;
cursor: pointer;
}
</style>
</head>
<body>
<div id="quiz-container">
<p>Choose the correct pair of words:</p>
<div id="question"></div>
<div id="options"></div>
</div>
<!-- Modal -->
<div id="myModal" class="modal">
<div class="modal-content">
<span class="close" onclick="closeModal()">×</span>
<H1 id="modal-question"></h1>
<p id="modal-text"></p>
</div>
</div>
<script>
const groups = [
/* Yaha meaning ke words */
];
let questionIndex = 0;
let currentPair;
function getNextQuestion() {
const groupIndex = Math.floor(Math.random() * groups.length);
const currentGroup = groups[groupIndex];
const [word1, word2] = getRandomWords(currentGroup);
currentPair = [word1, word2];
document.getElementById("question").innerHTML = `<h1>${word1}</h1>`;
const options = getRandomOptions(currentGroup);
options.push(word2);
options.sort(() => Math.random() - 0.5);
document.getElementById("options").innerHTML = "";
options.forEach(option => {
const button = document.createElement("button");
button.innerHTML = option;
button.onclick = () => checkAnswer(button);
document.getElementById("options").appendChild(button);
});
}
function getRandomWords(group) {
const shuffledGroup = [...group].sort(() => Math.random() - 0.5);
return shuffledGroup.slice(0, 2);
}
function getRandomOptions(currentGroup) {
const options = [];
while (options.length < 3) {
const randomGroupIndex = Math.floor(Math.random() * groups.length);
if (randomGroupIndex !== groups.indexOf(currentGroup)) {
const randomGroup = groups[randomGroupIndex];
const randomWord = randomGroup[Math.floor(Math.random() * randomGroup.length)];
if (!options.includes(randomWord)) {
options.push(randomWord);
}
}
}
return options;
}
function checkAnswer(btn) {
const selectedAnswer = btn.innerText;
const correctAnswer = currentPair[1];
document.getElementById("modal-question").innerHTML = `<p style="color: #ff5733;">${currentPair[0]}</p>`;
if (selectedAnswer === correctAnswer) {
document.getElementById("modal-text").innerHTML = `Correct! <strong style="color: #00cc00;">${correctAnswer}</strong>`;
} else {
document.getElementById("modal-text").innerHTML = `Wrong! The correct answer is <strong style="color: #ff0000;">${correctAnswer}</strong>`;
}
/*
agr sara questions wala gropu show kewana hai to niche wala dono code hta ke yahi ak code rhega
*/
document.getElementById("modal-question").innerHTML = `<p style="color: #ff5733;" > ${currentPair[0]}</p><p style="font-weight:200;" > ${groups.find(group => group.includes(currentPair[0])).join(', ')}</p>`;
/*
2----
document.getElementById("modal-question").innerHTML = `<p>My Question: <span id="question-word">${currentPair[0]}</span></p><p id="word-group" style="display:none;">Word Group: ${groups.find(group => group.includes(currentPair[0])).join(', ')}</p>`;
3---
document.getElementById("question-word").addEventListener("click", function() {
const wordGroup = document.getElementById("word-group");
wordGroup.style.display = (wordGroup.style.display === "none") ? "block" : "none";
});
*/
openModal();
}
function openModal() {
document.getElementById("myModal").style.display = "block";
}
function closeModal() {
document.getElementById("myModal").style.display = "none";
getNextQuestion();
}
// Initial question
getNextQuestion();
</script>
<script>
// Function to display all words in the group
function displayAllWords() {
const allWords = groups.map(group => group.join(', ')).join('<br><br><br>');
document.getElementById("modal-question").innerHTML = `<p style="color: #ff5733;">All Words</p><p style="font-weight: 200;">${allWords}</p>`;
openModal();
}
// Set up a click event for the question
document.getElementById("question").addEventListener("click", displayAllWords);
</script>
</body>
</html>
Copy
View
Edit
Download HTML
Same box
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie-edge">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.8.0/styles/base16/humanoid-dark.min.css" integrity="sha512-VpzmzXvIXjYfKE4xjvTjF41gt15bbXf3u0CDWXDm105TA7yphqLSVqAc+gnpJswiS068uRYqiXCC4MvCycjQhg==" crossorigin="anonymous" referrerpolicy="no-referrer" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.8.0/highlight.min.js"></script>
<style>
body{
background:#222;
}
* {
outline: none;
}
.response {
box-shadow: 0 0 10px rgba(0, 0, 0, 0.4), 0 0 10px rgba(0, 0, 0, 0.6), 0 0 10px rgba(0, 0, 0, 0.8);
width: 93vw;
margin: auto;
position: relative;
display: flex;
flex-wrap: nowrap;
/* Prevent wrapping of boxes when scrolling horizontally */
margin-bottom: 20px;
background: black;
overflow-x: auto;
/* Enable horizontal scrolling */
border: 1px solid gray;
border-radius: 10px;
max-height: 350px;
color: white;
padding: 0;
margin-bottom: 160px;
}
h1 {
text-align: center;
}
/* Styles for the copy button */
.copy-button {
position: absolute;
height: 25px;
top: 10px;
right: 20px;
padding: 4px 8px;
border: none;
border-radius: 4px;
background-color: #007bff;
color: #fff;
cursor: pointer;
}
.copy-button-copying {
background-color: #333;
border: 1px solid black;
}
.leftb {
position: absolute;
top: 10px;
left: 10px;
height: 25px;
border: 1px double burlywood;
border-radius: 4px;
background-color: #000000;
color: #fff;
}
.leftc,
.download-button {
position: absolute;
top: 10px;
left: 100px;
/* Adjusted position for "Edit" button */
height: 25px;
border: 1px double burlywood;
border-radius: 4px;
background-color: #000000;
color: #fff;
}
</style>
</head>
<body>
<!-- start -->
<br><br><br><br><br><br>
<pre class="response"> <code style="background: black; padding-top: 40px; padding-left: 20px;" class="language-html">
w
</code>
<button class="copy-button" onclick="copyCode(this)">Copy</button>
<button class="leftb" onclick="openContentInNewTab(this)">View</button>
<button class="leftc" onclick="toggleEditMode(this)">Edit</button>
<button class="download-button" style="display: none;" onclick="downloadHTML(this)">Download HTML</button>
</pre>
<!-- end -->
<script>
function toggleEditMode(button) {
const preElement = button.parentElement;
const codeElement = preElement.querySelector('code');
const newButton = preElement.querySelector('.download-button');
// Hide the other buttons
const copyButton = preElement.querySelector('.copy-button');
const viewButton = preElement.querySelector('.leftb');
const editButton = preElement.querySelector('.leftc');
editButton.style.display = 'none';
// Show the "Download HTML" button
newButton.style.display = 'inline-block';
preElement.style.backgroundColor = '#333';
codeElement.style.backgroundColor = '#333';
codeElement.contentEditable = true;
codeElement.focus();
// Add an event listener to make the code non-editable when clicking outside the code block.
document.addEventListener('click', function(event) {
if (!preElement.contains(event.target)) {
exitEditMode(preElement);
} }); }
function exitEditMode(preElement) {
const codeElement = preElement.querySelector('code');
const copyButton = preElement.querySelector('.copy-button');
const viewButton = preElement.querySelector('.leftb');
const editButton = preElement.querySelector('.leftc');
const newButton = preElement.querySelector('.download-button');
preElement.style.backgroundColor = 'black';
codeElement.style.backgroundColor = 'black';
codeElement.contentEditable = false;
// Show the original buttons
copyButton.style.display = 'inline-block';
viewButton.style.display = 'inline-block';
editButton.style.display = 'inline-block';
// Hide the "Download HTML" button
newButton.style.display = 'none';
}
function getRandomWord(length) {
const characters = 'abcdefghijklmnopqrstuvwxyz';
let randomWord = '';
for (let i = 0; i < length; i++) {
const randomIndex = Math.floor(Math.random() * characters.length);
randomWord += characters.charAt(randomIndex);
}
return randomWord;
}
function downloadHTML(button) {
const preElement = button.parentElement;
const codeElement = preElement.querySelector('code');
const htmlContent = codeElement.innerText;
const blob = new Blob([htmlContent], { type: 'text/html' });
const randomFileName = getRandomWord(8) + '.html';
const url = URL.createObjectURL(blob);
const a = document.createElement('a');
a.href = url;
a.download = randomFileName;
a.click();
URL.revokeObjectURL(url);
}
function copyCode(button) {
const responseTextElement = button.parentElement.querySelector('code');
const textToCopy = responseTextElement.innerText;
const tempTextArea = document.createElement('textarea');
tempTextArea.value = textToCopy;
document.body.appendChild(tempTextArea);
tempTextArea.select();
document.execCommand('copy');
document.body.removeChild(tempTextArea);
button.innerText = 'Copied';
button.classList.add('copy-button-copying');
setTimeout(() => {
button.innerText = 'Copy';
button.classList.remove('copy-button-copying');
}, 2000);
}
function openContentInNewTab(button) {
const responseTextElement = button.parentElement.querySelector('code');
const textToOpen = responseTextElement.innerText;
const blob = new Blob([textToOpen], { type: 'text/html' });
const url = URL.createObjectURL(blob);
const newTab = window.open(url, '_blank');
}
</script>
<script>
// Include your existing scripts and libraries here
hljs.initHighlightingOnLoad();
</script>
</body>
</html>
Copy
View
Edit
Download HTML
Isme box add krne ke liye
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>HTML Escape</title>
<style>
body {
font-family: Arial, sans-serif;
text-align: center;
background-color: #f0f0f0;
}
.container {
max-width: 600px;
margin: 0 auto;
margin-top: 60px;
padding: 20px;
background-color: #fff;
border-radius: 10px;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
}
textarea {
width: 90%;
height: 250px;
padding: 10px;
margin-top: 10px;
border: 1px solid #ccc;
border-radius: 5px;
font-family: "Arial", sans-serif;
}
button {
margin-top: 10px;
padding: 10px 20px;
background-color: #007BFF;
color: #fff;
border: none;
border-radius: 5px;
cursor: pointer;
}
</style>
</head>
<body>
<div class="container">
<textarea wrap="off" placeholder="Enter HTML code here" id="box"></textarea>
<button onclick="escapeHTMLAndAddText()">Escape HTML and Add Text</button>
<br>
<button id="copyButton" onclick="copyText()">Copy </button>
<button id="resetButton" onclick="resetText()">Reset</button>
</div>
<script>
function resetText() {
var textarea = document.getElementById("box");
textarea.value = ""; // Reset the textarea content
var resetButton = document.getElementById('resetButton');
resetButton.textContent = "Reseted";
setTimeout(function() {
resetButton.textContent = "Reset";
}, 2000); // Reset the button text to "Reset" after 2 seconds
}
</script>
<script>
// Your JavaScript functions remain unchanged.
</script>
<script>
function copyText() {
var textarea = document.getElementById("box");
textarea.select();
document.execCommand("copy");
window.getSelection().removeAllRanges();
var copyButton = document.getElementById('copyButton');
copyButton.textContent = "Copied";
setTimeout(function() {
copyButton.textContent = "Copy";
}, 2000); // Reset the button text to "Copy" after 2 seconds
}
</script>
<script>
function escapeHTMLAndAddText() {
const box = document.getElementById("box");
const escapedCode = htmlEscape(box.value);
const textBefore = ' \n\n\n\n\n<!-- start --> \n\n\n\n\n <h1> </h1> \n \n<pre class="response">\n <code style="background: black; padding-top: 40px; padding-left: 20px;" class="language-html">';
const textAfter = ' \n</code>\n <button class="copy-button" onclick="copyCode(this)">Copy</button>\n <button class="leftb" onclick="openContentInNewTab(this)">View</button>\n <button class="leftc" onclick="toggleEditMode(this)">Edit</button>\n <button class="download-button" style="display: none;" onclick="downloadHTML(this)">Download HTML</button>\n </pre> \n\n\n\n\n<!-- end --> \n\n\n\n\n\n\n\n\n\n\n\n\n\n\n';
box.value = textBefore + escapedCode + textAfter;
}
function htmlEscape(text) {
return text.replace(/[<>&]/g, function(tag) {
const replacements = {
'<': '<',
'>': '>',
'&': '&'
};
return replacements[tag] || tag;
});
}
</script>
</body>
</html>
Copy
View
Edit
Download HTML
...........
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title> </title>
<style>
html{
background: black;
}
pre{
background-color: black;
font-weight: 200;
font-size: 17px;
width: 90%;
font-family: normal;
padding: 0 10px;
color: white;
white-space: pre-wrap;
}
</style>
</head>
<body>
<pre>
•Meaning
•
•
•
•
•
•
</pre>
</body>
</html>
Copy
View
Edit
Download HTML
Meaning
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Word Quiz</title>
<style>
body {
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
text-align: center;
margin: 0;
padding: 0;
margin-top: 130px;
background-color: #000;
color: #fff;
}
#quiz-container {
width: 100%;
max-width: 600px;
margin: auto;
padding: 20px;
box-sizing: border-box;
background-color: #000;
}
h1 {
color:#66c1bb;
font-size: 37px;
font-weight: bold;
color: #4CAF50;
}
p {
color: white;
font-size: 18px;
font-weight: bold;
background-color: #000;
}
#question{
margin-bottom: 20px;
font-size: 58px;
font-weight: bold;
color: #fff;
}
#options {
display: flex;
flex-direction: column;
align-items: center;
}
button {
padding: 15px 30px;
margin: 10px;
cursor: pointer;
font-size: 18px;
background-color: #333;
color: #fff;
border: none;
border-radius: 5px;
transition: background-color 0.3s ease;
}
button:hover {
background-color: #555;
}
/* Modal styles */
#myModal {
display: none;
position: fixed;
z-index: 1;
left: 0;
top: 0;
width: 100%;
height: 100%;
overflow: auto;
background-color: rgb(0,0,0);
background-color: rgba(0,0,0,0.4);
padding-top: 230px;
}
.modal-content {
background-color: black;
margin: 5% auto;
padding: 20px;
border: 1px solid #888;
width: 80%;
text-align: center;
}
.close {
color: #aaa;
float: right;
font-size: 28px;
font-weight: bold;
}
.close:hover,
.close:focus {
color: black;
text-decoration: none;
cursor: pointer;
}
</style>
</head>
<body>
<div id="quiz-container">
<p>Choose the correct pair of words:</p>
<div id="question"></div>
<div id="options"></div>
</div>
<!-- Modal -->
<div id="myModal" class="modal">
<div class="modal-content">
<span class="close" onclick="closeModal()">×</span>
<H1 id="modal-question"></h1>
<p id="modal-text"></p>
</div>
</div>
<script>
const groups = [
/* Yaha meaning ke words
niche jaise formate me
["Congregate", "gather", "assemble"],
["Impeach", "indict", "blame", "charge"]
*/
];
let questionIndex = 0;
let currentPair;
function getNextQuestion() {
const groupIndex = Math.floor(Math.random() * groups.length);
const currentGroup = groups[groupIndex];
const [word1, word2] = getRandomWords(currentGroup);
currentPair = [word1, word2];
document.getElementById("question").innerHTML = `<h1>${word1}</h1>`;
const options = getRandomOptions(currentGroup);
options.push(word2);
options.sort(() => Math.random() - 0.5);
document.getElementById("options").innerHTML = "";
options.forEach(option => {
const button = document.createElement("button");
button.innerHTML = option;
button.onclick = () => checkAnswer(button);
document.getElementById("options").appendChild(button);
});
}
function getRandomWords(group) {
const shuffledGroup = [...group].sort(() => Math.random() - 0.5);
return shuffledGroup.slice(0, 2);
}
function getRandomOptions(currentGroup) {
const options = [];
while (options.length < 3) {
const randomGroupIndex = Math.floor(Math.random() * groups.length);
if (randomGroupIndex !== groups.indexOf(currentGroup)) {
const randomGroup = groups[randomGroupIndex];
const randomWord = randomGroup[Math.floor(Math.random() * randomGroup.length)];
if (!options.includes(randomWord)) {
options.push(randomWord);
}
}
}
return options;
}
function checkAnswer(btn) {
const selectedAnswer = btn.innerText;
const correctAnswer = currentPair[1];
document.getElementById("modal-question").innerHTML = `<p style="color: #ff5733;">${currentPair[0]}</p>`;
if (selectedAnswer === correctAnswer) {
document.getElementById("modal-text").innerHTML = `Correct! <strong style="color: #00cc00;">${correctAnswer}</strong>`;
} else {
document.getElementById("modal-text").innerHTML = `Wrong! The correct answer is <strong style="color: #ff0000;">${correctAnswer}</strong>`;
}
openModal();
}
function openModal() {
document.getElementById("myModal").style.display = "block";
}
function closeModal() {
document.getElementById("myModal").style.display = "none";
getNextQuestion();
}
// Initial question
getNextQuestion();
</script>
<script>
// Function to display all words in the group
function displayAllWords() {
const allWords = groups.map(group => group.join(', ')).join('<br><br>');
document.getElementById("modal-question").innerHTML = `<p style="color: #ff5733;">All Words</p><p style="font-weight: 200;">${allWords}</p>`;
openModal();
// Add 10 line breaks at the end
const modalText = document.getElementById("modal-text");
modalText.innerHTML += "<br>".repeat(10);
}
// Set up a click event for the question
document.getElementById("question").addEventListener("click", displayAllWords);
</script>
</body>
</html>
Copy
View
Edit
Download HTML
Upper walee me meaning likhne ke liye meaning
["Congregate", "gather", "assemble"],
["Impeach", "indict", "blame", "charge"]
is formate me honi chahiye . Aise formate me banane ke liye
2uu2.neocities.org/tools/word-to-array
is web-page pr . Words likh ke space dena hoga comma nhi lagana hai ..
Dusri line me words linkhne pr o alag group ki trh treat hoga
Click krne pr group show
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
body {
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
text-align: center;
margin: 0;
padding: 0;
margin-top: 130px;
background-color: #000;
color: #fff;
}
#quiz-container {
width: 100%;
max-width: 600px;
margin: auto;
padding: 20px;
box-sizing: border-box;
background-color: #000;
}
h1 {
color:#66c1bb;
font-size: 37px;
font-weight: bold;
color: #4CAF50;
}
p {
color: white;
font-size: 18px;
font-weight: bold;
background-color: #000;
}
#question{
margin-bottom: 20px;
font-size: 58px;
font-weight: bold;
color: #fff;
}
#options {
display: flex;
flex-direction: column;
align-items: center;
}
button {
padding: 15px 30px;
margin: 10px;
cursor: pointer;
font-size: 18px;
background-color: #333;
color: #fff;
border: none;
border-radius: 5px;
transition: background-color 0.3s ease;
}
button:hover {
background-color: #555;
}
/* Modal styles */
#myModal {
display: none;
position: fixed;
z-index: 1;
left: 0;
top: 0;
width: 100%;
height: 100%;
overflow: auto;
background-color: rgb(0,0,0);
background-color: rgba(0,0,0,0.4);
padding-top: 230px;
}
.modal-content {
background-color: black;
margin: 5% auto;
padding: 20px;
border: 1px solid #888;
width: 80%;
text-align: center;
}
.close {
color: #aaa;
float: right;
font-size: 28px;
font-weight: bold;
}
.close:hover,
.close:focus {
color: black;
text-decoration: none;
cursor: pointer;
}
</style>
<title>Word Quiz</title>
</head>
<body>
<div id="quiz-container">
<p>Choose the correct pair of words:</p>
<div id="question"></div>
<div id="options"></div>
</div>
<!-- Modal -->
<div id="myModal" class="modal">
<div class="modal-content">
<span class="close" onclick="closeModal()">×</span>
<H1 id="modal-question"></h1>
<p id="modal-text"></p>
</div>
</div>
<script>
const groups = [
/*
Meaning ka formate
["Congregate", "gather", "assemble"],
["Consecrate", "screen", "holy", "baised", "blessed"]
*/
];
let questionIndex = 0;
let currentPair;
function getNextQuestion() {
const groupIndex = Math.floor(Math.random() * groups.length);
const currentGroup = groups[groupIndex];
const [word1, word2] = getRandomWords(currentGroup);
currentPair = [word1, word2];
document.getElementById("question").innerHTML = `<h1>${word1}</h1>`;
const options = getRandomOptions(currentGroup);
options.push(word2);
options.sort(() => Math.random() - 0.5);
document.getElementById("options").innerHTML = "";
options.forEach(option => {
const button = document.createElement("button");
button.innerHTML = option;
button.onclick = () => checkAnswer(button);
document.getElementById("options").appendChild(button);
});
}
function getRandomWords(group) {
const shuffledGroup = [...group].sort(() => Math.random() - 0.5);
return shuffledGroup.slice(0, 2);
}
function getRandomOptions(currentGroup) {
const options = [];
while (options.length < 3) {
const randomGroupIndex = Math.floor(Math.random() * groups.length);
if (randomGroupIndex !== groups.indexOf(currentGroup)) {
const randomGroup = groups[randomGroupIndex];
const randomWord = randomGroup[Math.floor(Math.random() * randomGroup.length)];
if (!options.includes(randomWord)) {
options.push(randomWord);
}
}
}
return options;
}
function checkAnswer(btn) {
const selectedAnswer = btn.innerText;
const correctAnswer = currentPair[1];
document.getElementById("modal-question").innerHTML = `<p>${currentPair[0]}</p>`;
document.getElementById("modal-question").innerHTML = `<p> <span id="question-word" style="color: #ff5733;">${currentPair[0]}</span></p><p id="word-group" style="display:none;">${groups.find(group => group.includes(currentPair[0])).join(', ')}</p>`;
if (selectedAnswer === correctAnswer) {
document.getElementById("modal-text").innerHTML = ` Correct ! <strong style="color: #00cc00;">${correctAnswer}</strong>`;
} else {
document.getElementById("modal-text").innerHTML = `Wrong! The correct answer is <strong style="color: #ff0000;">${correctAnswer}</strong>`;
}
/*
agr sara questions wala gropu show kewana hai to niche wala dono code hta ke yahi ak code rhega
1----
document.getElementById("modal-question").innerHTML = `<p>My Question: ${currentPair[0]}</p><p>Word Group: ${groups.find(group => group.includes(currentPair[0])).join(', ')}</p>`;
2----
document.getElementById("modal-question").innerHTML = `<p>My Question: <span id="question-word">${currentPair[0]}</span></p><p id="word-group" style="display:none;">Word Group: ${groups.find(group => group.includes(currentPair[0])).join(', ')}</p>`;
3---
document.getElementById("question-word").addEventListener("click", function() {
const wordGroup = document.getElementById("word-group");
wordGroup.style.display = (wordGroup.style.display === "none") ? "block" : "none";
});
*/
document.getElementById("question-word").addEventListener("click", function() {
const wordGroup = document.getElementById("word-group");
wordGroup.style.display = (wordGroup.style.display === "none") ? "block" : "none";
});
openModal();
}
function openModal() {
document.getElementById("myModal").style.display = "block";
}
function closeModal() {
document.getElementById("myModal").style.display = "none";
getNextQuestion();
}
// Initial question
getNextQuestion();
</script>
</body>
</html>
Copy
View
Edit
Download HTML
10-15 meaning ak sath
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
/* Add your CSS styles here */
</style>
<style>
body {
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
text-align: center;
margin: 0;
padding: 0;
background-color: #000;
color: #fff;
}
#quiz-container {
width: 100%;
max-width: 600px;
margin: auto;
padding: 20px;
box-sizing: border-box;
background-color: #000;
}
h1 {
color: #66c1bb;
font-size: 37px;
font-weight: bold;
color: #4CAF50;
}
p {
color: white;
font-size: 18px;
font-weight: bold;
background-color: #000;
}
#question {
margin-bottom: 20px;
font-size: 18px;
color: #fff;
}
#options {
display: flex;
flex-wrap: wrap;
justify-content: space-around;
}
button {
padding: 15px 30px;
margin: 10px;
cursor: pointer;
font-size: 18px;
background-color: #333;
color: #fff;
border: none;
border-radius: 5px;
transition: background-color 0.3s ease;
}
button.selected {
background-color: #00cc00;
}
button.wrong {
background-color: #ff0000;
}
#myModal {
display: none;
position: fixed;
z-index: 1;
left: 0;
top: 0;
width: 100%;
height: 100%;
overflow: auto;
background-color: rgb(0,0,0);
background-color: rgba(0,0,0,0.4);
padding-top: 230px;
}
.modal-content {
background-color: black;
margin: 5% auto;
padding: 20px;
border: 1px solid #888;
width: 80%;
text-align: center;
}
.close {
color: #aaa;
float: right;
font-size: 28px;
font-weight: bold;
}
.close:hover,
.close:focus {
color: black;
text-decoration: none;
cursor: pointer;
}
</style>
<title>Word Quiz</title>
</head>
<body>
<div id="quiz-container">
<p>Select words from the given group:</p>
<div id="question"></div>
<div id="options"></div>
<button onclick="checkAnswers()">Proceed</button>
</div>
<!-- Modal -->
<div id="myModal" class="modal">
<div class="modal-content">
<span class="close" onclick="closeModal()">×</span>
<h1 id="modal-question"></h1>
<p id="modal-text"></p>
</div>
</div>
<script>
const groups = [
["Impede", "resist", "prevent", "stop"],
["Harmonize", "peace", "equanimity", "harmony", "tranquility"],
["Adumbrate", "predict", "omen", "sign", "augur", "protend", "foretell"],
["Ruminate", "think", "mull", "muse", "reckon", "contemplate", "envisage"],
["Congregate", "gather", "assemble"],
["Consecrate", "screen", "holy", "biased", "blessed"],
];
let currentGroup;
function displayOptions() {
// Choose a random group
currentGroup = groups[Math.floor(Math.random() * groups.length)];
// Extract the group name and words
const groupName = currentGroup[0];
const groupWords = currentGroup.slice(1);
// Shuffle the group words
groupWords.sort(() => Math.random() - 0.5);
// Choose a random word from the group
const randomQuestionWord = groupWords[Math.floor(Math.random() * groupWords.length)];
// Choose 8 random words from other groups
const wrongOptions = getWrongOptions(groupWords);
// Combine correct and wrong options
// Combine correct and all options
const options = [...groupWords, ...wrongOptions];
// Shuffle all options
options.sort(() => Math.random() - 0.5);
// Display the randomly selected word from the group as the question
document.getElementById("question").innerHTML = `<h1>${randomQuestionWord}</h1>`;
document.getElementById("options").innerHTML = "";
options.forEach(option => {
const button = document.createElement("button");
button.innerHTML = option;
button.onclick = () => toggleSelection(button);
document.getElementById("options").appendChild(button);
});
}
function getWrongOptions(excludeWords) {
const wrongOptions = [];
const minWrongOptions = 13;
while (wrongOptions.length < minWrongOptions) {
const randomGroup = groups[Math.floor(Math.random() * groups.length)];
const randomWord = randomGroup[Math.floor(Math.random() * randomGroup.length)];
if (!excludeWords.includes(randomWord) && !wrongOptions.includes(randomWord)) {
wrongOptions.push(randomWord);
}
}
return wrongOptions;
}
function toggleSelection(btn) {
btn.classList.toggle("selected");
}
function checkAnswers() {
const selectedWords = Array.from(document.querySelectorAll(".selected")).map(btn => btn.innerHTML);
const correctWords = currentGroup.slice(1); // Exclude the group name
const incorrectSelections = selectedWords.filter(word => !correctWords.includes(word));
const missedWords = correctWords.filter(word => !selectedWords.includes(word));
let modalText = '';
if (incorrectSelections.length > 0 || missedWords.length > 0) {
modalText += '<p style="color: #ff5733;">Results:</p>';
}
if (incorrectSelections.length > 0) {
modalText +=`Incorrect: ${incorrectSelections.join(', ')}<br> <br>`;
}
if (missedWords.length > 0) {
modalText += `<p style="color: #00cc00;">Missed: ${missedWords.join(', ')}</p>`;
}
modalText += `<p style="color: #ff5733;">All Words in Group:</p>`;
modalText += `<p style="font-weight: 200;">${currentGroup.join(', ')}</p>`;
const randomQuestionWord = currentGroup[Math.floor(Math.random() * currentGroup.length)];
document.getElementById("modal-question").innerHTML = `<h1>${randomQuestionWord}</h1>`;
document.getElementById("modal-text").innerHTML = modalText;
openModal();
}
function openModal() {
document.getElementById("myModal").style.display = "block";
}
function closeModal() {
document.getElementById("myModal").style.display = "none";
displayOptions();
}
// Initial question
displayOptions();
</script>
</body>
</html>
Copy
View
Edit
Download HTML
w
Copy
View
Edit
Download HTML