Стремился вставить HTML с изображением и встроить текстовое поле кода в окно результатов викторины, когда достигнута оце

Стремился вставить HTML с изображением и встроить текстовое поле кода в окно результатов викторины, когда достигнута оце ⇐ CSS

1 сообщение • Страница 1 из 1

Anonymous

Стремился вставить HTML с изображением и встроить текстовое поле кода в окно результатов викторины, когда достигнута оце

Цитата

Сообщение Anonymous » 18 июн 2025, 10:43

ожидается: при получении 100% -ного результата в викторине «приз» отображается ниже замечаний, которые включают изображение и встраивая код
, что на самом деле произошло: или вообще не сработало, либо для этого не вставил его для всех результатов, и не только когда я не сработал. Настроил его оттуда.
Я очень новичок в программировании, поэтому я очень не знаю здесь, но я чувствую, что это должно быть возможно, однако при попытке настроить код, он сломался или ничего не сделал.

Код: Выделить всё

var img = document.createElement("img");
img.src = "https://files.catbox.moe/s0ev5s.png";
var src = document.getElementById("Prize");
src.appendChild(img);

минимальный воспроизводимый пример на Codepen: https://codepen.io/arianami/pen/qedmeqn
> Над «Кнопкой подтверждения» 
html Я хочу отображать во всплывающем окне (.modal-content-container), когда достигается 100% результат

< /code>
html 

Naru chan's Cat Cafe

Congratulations, Quiz Completed.

Attempts : 2
Wrong Answers :
Right Answers :
Grade : %

/*I want to add the HTML code to the remarks section of the grade-details*/

Continue

Score : / 2
Question : / 2

Please Pick An Option

Continue

Next Question

< /code>
css: 
/*NARU QUIZ*/

*{
margin: 0;
padding: 0;
box-sizing: border-box;
}

html, quiz-body{
height: 100%;
}

quiz-body{
font-family: 'Arial', sans-serif;

}

quiz-main{
width: 100%;
min-height: 100vh;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
}

.game-quiz-container{
width: 550px;
height: 400px;
display: flex;
flex-direction: column;
align-items: center;
justify-content: space-around;
border-width: 1px;
border-style: solid;
}

.game-details-container{
width: 80%;
height: 4rem;
display: flex;
justify-content: space-around;
align-items: center;
}

.game-details-container h1{
font-size: 1.2rem;
}

.game-question-container{
width: 80%;
height: 8rem;
display: flex;
align-items: center;
justify-content: center;
border: 1px solid;
}

.game-question-container h1{
font-size: 1.1rem;
text-align: center;
padding: 3px;
}

.game-options-container{
width: 80%;
height: 12rem;
display: flex;
flex-wrap: wrap;
align-items: center;
justify-content: space-around;
font-size:0.96rem;
text-align: center;
}

.game-options-container span{
width: 13rem;
height: 3rem;
border: 1px solid;
background-color: #ffffff;
overflow: hidden;
}
span label{
width: 100%;
height: 100%;
display: flex;
align-items: center;
justify-content: center;
cursor: pointer;
transition: transform 0.3s;
font-weight: 600;
color: black;
}

input[type="radio"] {
position: relative;
display: none;
}

input[type=radio]:checked ~ .option {
}

.next-button-container{
width: 50%;
height: 3rem;
display: flex;
justify-content: center;
}
.next-button-container button{
width: 8rem;
height: 2rem;
background: none;
color: black;
border: 1px solid;
cursor: pointer;
outline: none;
}
.next-button-container button:hover{
}

.modal-container{
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);
flex-direction: column;
align-items: center;
justify-content: center;
-webkit-animation: fadeIn 1.2s ease-in-out;
animation: fadeIn 1.2s ease-in-out;
}

.modal-content-container{
height: fit-content;
width: 25rem;
background-color: #6c5e7c;
display: flex;
flex-direction: column;
align-items: center;
justify-content: space-around;
border-style: solid;
border-width: 1px;
border-color: #382d44;
padding: 10px;
}

.modal-content-container h1{
font-size: 1.3rem;
height: 3rem;
color: ;
text-align: center;
}

.grade-details{
width: 15rem;
height: 10rem;
display: flex;
flex-direction: column;
align-items: center;
justify-content: space-around;
}

.grade-details p{
color: white;
text-align: center;
}

.modal-button-container{
height: 2rem;
width: 100%;
display: flex;
align-items: center;
justify-content: center;
}

.modal-button-container button{
width: 10rem;
height: 2rem;
background: none;
outline: none;
border: 1px solid;
color: white;
font-size: 1.1rem;
cursor: pointer;
}
.modal-button-container button:hover{
}

@media(min-width : 300px) and (max-width : 350px){
.game-quiz-container{
width: 90%;
height: 80vh;
}
.game-details-container h1{
font-size: 0.8rem;
}

.game-question-container{
height: 6rem;
}
.game-question-container h1{
font-size: 0.9rem;
}

.game-options-container span{
width: 90%;
height: 2.5rem;
}
.game-options-container span label{
font-size: 0.8rem;
}
.modal-content-container{
width: 90%;
height: 25rem;
}

.modal-content-container h1{
font-size: 1.2rem;
}
}

@media(min-width : 350px) and (max-width : 700px){
.game-quiz-container{
width: 90%;
height: 80vh;
}
.game-details-container h1{
font-size: 1rem;
}

.game-question-container{
height: 8rem;
}

.game-question-container h1{
font-size: 0.9rem;
}

.game-options-container span{
width: 90%;
}
.modal-content-container{
width: 90%;
height: 25rem;
}
.modal-content-container h1{
font-size: 1.2rem;
}
}

@keyframes fadeIn {
from {opacity: 0;}
to {opacity:1 ;}
}

@-webkit-keyframes fadeIn {
from {opacity: 0;}
to {opacity: 1;}
}
< /code>
js: 
//this would be the object shape for storing the questions
//you can change the questions to your own taste or even add more questions..
const questions = [
{
question: "What is Naru's pet cat named?",
optionA: "Nyanko",
optionB: "Maru",
optionC: "Koneko",
optionD: "Nyanchi",
correctOption: "optionA"
},

{
question: "What is Naru's Blood type?",
optionA: "AB",
optionB: "O",
optionC: "B",
optionD: "A",
correctOption: "optionC"
},

]

let shuffledQuestions = [] //empty array to hold shuffled selected questions

function handleQuestions() {
//function to shuffle and push 10 questions to shuffledQuestions array
while (shuffledQuestions.length {
document.getElementById(option.labels[0].id).style.backgroundColor = ""
})
}

// unchecking all radio buttons for next question(can be done with map or foreach loop also)
function unCheckRadioButtons() {
const options = document.getElementsByName("option");
for (let i = 0; i < options.length; i++) {
options.checked = false;
}
}

// function for when all questions being answered
function handleEndGame() {
let remark = null
let remarkColor = null

// condition check for player remark and remark color
if (playerScore = 0 && playerScore < 1) {
remark = "Average Grades, You can do better."
remarkColor = "black"
}
else if (playerScore >= 0 && playerScore < 1) {
remark = "Excellent, Keep the good work going."
remarkColor = "black"
}
else if (playerScore = 2) {
remark = "100% Amazing!"
remarkColor = "black"
//I want to add the HTML to this parameter

}
//playerScore divided by new length of questions
const playerGrade = (playerScore / 2) * 100

//data to display to score board
document.getElementById('remarks').innerHTML = remark
document.getElementById('remarks').style.color = remarkColor
document.getElementById('grade-percentage').innerHTML = playerGrade
document.getElementById('wrong-answers').innerHTML = wrongAttempt
document.getElementById('right-answers').innerHTML = playerScore
document.getElementById('score-modal').style.display = "flex"

}

//closes score modal and resets game
function closeScoreModal() {
questionNumber = 1
playerScore = 0
wrongAttempt = 0
indexNumber = 0
shuffledQuestions = []
NextQuestion(indexNumber)
document.getElementById('score-modal').style.display = "none"
}

//function to close warning modal
function closeOptionModal() {
document.getElementById('option-modal').style.display = "none"
}
< /code>
Для дальнейшего контекста я хочу, чтобы изображение и текстовое поле HTML отображались ниже «Замечания» в этом всплывающем окне
изображение всплываемого окна, показывающего викторину, 
Желаемый эффект в форме изображения
Изображение всплывающего окна «Результаты и изображения» 

Подробнее здесь: https://stackoverflow.com/questions/796 ... indow-of-a

1750232631

Anonymous

 [b] ожидается: [/b] при получении 100% -ного результата в викторине «приз» отображается ниже замечаний, которые включают изображение и встраивая код 
[b], что на самом деле произошло: [/b] или вообще не сработало, либо для этого не вставил его для всех результатов, и не только когда я не сработал. Настроил его оттуда.
Я очень новичок в программировании, поэтому я очень не знаю здесь, но я чувствую, что это должно быть возможно, однако при попытке настроить код, он сломался или ничего не сделал.[code]var img = document.createElement("img");
img.src = "https://files.catbox.moe/s0ev5s.png";
var src = document.getElementById("Prize");
src.appendChild(img);


[/code]
[b] минимальный воспроизводимый пример на Codepen: [/b] https://codepen.io/arianami/pen/qedmeqn
> Над «Кнопкой подтверждения» < /p>
html Я хочу отображать во всплывающем окне (.modal-content-container), когда достигается 100% результат < /p>
[url=https://arianami.neocities.org/CatCafe.html]
[img]https://files.catbox.moe/wg0rom.gif[/img]
[/url]
[url=https://arianami.neocities.org]
[img]https://files.catbox.moe/wg0rom.gif[/img]
[/url]
< /code>
html < /p>
    




Naru chan's Cat Cafe









Congratulations, Quiz Completed.


Attempts : 2
Wrong Answers : 
Right Answers : 
Grade : %

/*I want to add the HTML code to the remarks section of the grade-details*/

Continue





Score :  / 2
 Question :  / 2






Please Pick An Option


Continue



























Next Question








< /code>
css: < /p>
/*NARU QUIZ*/

*{
margin: 0;
padding: 0;
box-sizing: border-box;
}

html, quiz-body{
height: 100%;
}

quiz-body{
font-family: 'Arial', sans-serif;

}

quiz-main{
width: 100%;
min-height: 100vh;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
}

.game-quiz-container{
width: 550px;
height: 400px;
display: flex;
flex-direction: column;
align-items: center;
justify-content: space-around;
border-width: 1px;
border-style: solid;
}

.game-details-container{
width: 80%;
height: 4rem;
display: flex;
justify-content: space-around;
align-items: center;
}

.game-details-container h1{
font-size: 1.2rem;
}

.game-question-container{
width: 80%;
height: 8rem;
display: flex;
align-items: center;
justify-content: center;
border: 1px solid;
}

.game-question-container h1{
font-size: 1.1rem;
text-align: center;
padding: 3px;
}

.game-options-container{
width: 80%;
height: 12rem;
display: flex;
flex-wrap: wrap;
align-items: center;
justify-content: space-around;
font-size:0.96rem;
text-align: center;
}

.game-options-container span{
width: 13rem;
height: 3rem;
border: 1px solid;
background-color: #ffffff;
overflow: hidden;
}
span label{
width: 100%;
height: 100%;
display: flex;
align-items: center;
justify-content: center;
cursor: pointer;
transition: transform 0.3s;
font-weight: 600;
color: black;
}

input[type="radio"] {
position: relative;
display: none;
}

input[type=radio]:checked ~ .option {
}

.next-button-container{
width: 50%;
height: 3rem;
display: flex;
justify-content: center;
}
.next-button-container button{
width: 8rem;
height: 2rem;
background: none;
color: black;
border: 1px solid;
cursor: pointer;
outline: none;
}
.next-button-container button:hover{
}

.modal-container{
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);
flex-direction: column;
align-items: center;
justify-content: center;
-webkit-animation: fadeIn 1.2s ease-in-out;
animation: fadeIn 1.2s ease-in-out;
}

.modal-content-container{
height: fit-content;
width: 25rem;
background-color: #6c5e7c;
display: flex;
flex-direction: column;
align-items: center;
justify-content: space-around;
border-style: solid;
border-width: 1px;
border-color: #382d44;
padding: 10px;
}

.modal-content-container h1{
font-size: 1.3rem;
height: 3rem;
color: ;
text-align: center;
}

.grade-details{
width: 15rem;
height: 10rem;
display: flex;
flex-direction: column;
align-items: center;
justify-content: space-around;
}

.grade-details p{
color: white;
text-align: center;
}

.modal-button-container{
height: 2rem;
width: 100%;
display: flex;
align-items: center;
justify-content: center;
}

.modal-button-container button{
width: 10rem;
height: 2rem;
background: none;
outline: none;
border: 1px solid;
color: white;
font-size: 1.1rem;
cursor: pointer;
}
.modal-button-container button:hover{
}

@media(min-width : 300px) and (max-width : 350px){
.game-quiz-container{
width: 90%;
height: 80vh;
}
.game-details-container h1{
font-size: 0.8rem;
}

.game-question-container{
height: 6rem;
}
.game-question-container h1{
font-size: 0.9rem;
}

.game-options-container span{
width: 90%;
height: 2.5rem;
}
.game-options-container span label{
font-size: 0.8rem;
}
.modal-content-container{
width: 90%;
height: 25rem;
}

.modal-content-container h1{
font-size: 1.2rem;
}
}

@media(min-width : 350px) and (max-width : 700px){
.game-quiz-container{
width: 90%;
height: 80vh;
}
.game-details-container h1{
font-size: 1rem;
}

.game-question-container{
height: 8rem;
}

.game-question-container h1{
font-size: 0.9rem;
}

.game-options-container span{
width: 90%;
}
.modal-content-container{
width: 90%;
height: 25rem;
}
.modal-content-container h1{
font-size: 1.2rem;
}
}

@keyframes fadeIn {
from {opacity: 0;}
to {opacity:1 ;}
}

@-webkit-keyframes fadeIn {
from {opacity: 0;}
to {opacity: 1;}
}
< /code>
js: < /p>
//this would be the object shape for storing the questions
//you can change the questions to your own taste or even add more questions..
const questions = [
{
question: "What is Naru's pet cat named?",
optionA: "Nyanko",
optionB: "Maru",
optionC: "Koneko",
optionD: "Nyanchi",
correctOption: "optionA"
},

{
question: "What is Naru's Blood type?",
optionA: "AB",
optionB: "O",
optionC: "B",
optionD: "A",
correctOption:  "optionC"
},

]

let shuffledQuestions = [] //empty array to hold shuffled selected questions

function handleQuestions() {
//function to shuffle and push 10 questions to shuffledQuestions array
while (shuffledQuestions.length  {
document.getElementById(option.labels[0].id).style.backgroundColor = ""
})
}

// unchecking all radio buttons for next question(can be done with map or foreach loop also)
function unCheckRadioButtons() {
const options = document.getElementsByName("option");
for (let i = 0; i < options.length; i++) {
options[i].checked = false;
}
}

// function for when all questions being answered
function handleEndGame() {
let remark = null
let remarkColor = null

// condition check for player remark and remark color
if (playerScore = 0 && playerScore < 1) {
remark = "Average Grades, You can do better."
remarkColor = "black"
}
else if (playerScore >= 0 && playerScore < 1) {
remark = "Excellent, Keep the good work going."
remarkColor = "black"
}
else if (playerScore = 2) {
remark = "100% Amazing!"
remarkColor = "black"
//I want to add the HTML to this parameter

}
//playerScore divided by new length of questions
const playerGrade = (playerScore / 2) * 100

//data to display to score board
document.getElementById('remarks').innerHTML = remark
document.getElementById('remarks').style.color = remarkColor
document.getElementById('grade-percentage').innerHTML = playerGrade
document.getElementById('wrong-answers').innerHTML = wrongAttempt
document.getElementById('right-answers').innerHTML = playerScore
document.getElementById('score-modal').style.display = "flex"

}

//closes score modal and resets game
function closeScoreModal() {
questionNumber = 1
playerScore = 0
wrongAttempt = 0
indexNumber = 0
shuffledQuestions = []
NextQuestion(indexNumber)
document.getElementById('score-modal').style.display = "none"
}

//function to close warning modal
function closeOptionModal() {
document.getElementById('option-modal').style.display = "none"
}
< /code>
Для дальнейшего контекста я хочу, чтобы изображение и текстовое поле HTML отображались ниже «Замечания» в этом всплывающем окне
изображение всплываемого окна, показывающего викторину, < /p>
Желаемый эффект в форме изображения
Изображение всплывающего окна «Результаты и изображения» < /p> 

Подробнее здесь: [url]https://stackoverflow.com/questions/79669650/looking-to-insert-html-with-image-and-embed-code-textbox-in-results-window-of-a[/url]

Ответить Пред. тема След. тема

1 сообщение • Страница 1 из 1

Быстрый ответ

Заголовок:

Имя пользователя:

Изменение регистра текста:

Смайлики

Ещё смайлики…

К этому ответу прикреплено по крайней мере одно вложение.

Если вы не хотите добавлять вложения, оставьте поля пустыми. Можно прикреплять файлы, перетаскивая их в окно сообщения.

Максимально разрешённый размер вложения: 15 МБ.

Имя файла:

Комментарий к файлу:

Имя файла	Комментарий к файлу	Размер	Статус

Похожие темы

Ответы

Просмотры

Последнее сообщение

Стремился вставить HTML с изображением и встроить текстовое поле кода в окно результатов викторины, когда достигнута оце

Последнее сообщение Anonymous « 18 июн 2025, 07:47
Добавлено в форуме CSS

Anonymous » 18 июн 2025, 07:47 » в форуме CSS

ожидается: при получении 100% -ного результата в викторине «приз» отображается ниже замечаний, которые включают изображение и внедряет код
, что на самом деле произошло: это либо не сработало, либо он вставил его для всех результатов, и не только...

0 Ответы

2 Просмотры

Последнее сообщение Anonymous
18 июн 2025, 07:47
Стремитесь вставить HTML с изображением и встроить текстовое поле кода в окно результатов викторины, когда оценка 100% д

Последнее сообщение Anonymous « 17 июн 2025, 23:07
Добавлено в форуме Html

Anonymous » 17 июн 2025, 23:07 » в форуме Html

ожидается: при получении 100% -ного результата в викторине «приз» отображается ниже замечаний, которые включают изображение и внедряет код
, что на самом деле произошло: это либо не сработало, либо он вставил его для всех результатов, и не только...

0 Ответы

2 Просмотры

Последнее сообщение Anonymous
17 июн 2025, 23:07
Стремитесь вставить HTML с изображением и встроить текстовое поле кода в окно результатов викторины, когда оценка 100% д

Последнее сообщение Anonymous « 17 июн 2025, 23:07
Добавлено в форуме CSS

Anonymous » 17 июн 2025, 23:07 » в форуме CSS

ожидается: при получении 100% -ного результата в викторине «приз» отображается ниже замечаний, которые включают изображение и внедряет код
, что на самом деле произошло: это либо не сработало, либо он вставил его для всех результатов, и не только...

0 Ответы

4 Просмотры

Последнее сообщение Anonymous
17 июн 2025, 23:07
Стремитесь вставить HTML с изображением и встроить текстовое поле кода в окно результатов викторины, когда оценка 100% д

Последнее сообщение Anonymous « 17 июн 2025, 23:07
Добавлено в форуме Javascript

Anonymous » 17 июн 2025, 23:07 » в форуме Javascript

ожидается: при получении 100% -ного результата в викторине «приз» отображается ниже замечаний, которые включают изображение и внедряет код
, что на самом деле произошло: это либо не сработало, либо он вставил его для всех результатов, и не только...

0 Ответы

6 Просмотры

Последнее сообщение Anonymous
17 июн 2025, 23:07
Swift: проблемы с перетасовкой ответов в приложении викторины/викторины

Последнее сообщение Anonymous « 31 окт 2023, 06:02
Добавлено в форуме IOS

Anonymous » 31 окт 2023, 06:02 » в форуме IOS

Пожалуйста, помогите мне, поскольку я новичок в SwiftUI и программировании в целом. Это мой первый раз, когда я разрабатываю викторину. Я столкнулся с проблемой перетасовки ответов на простые вопросы. Я пытаюсь создать функцию, содержащую все...

0 Ответы

33 Просмотры

Последнее сообщение Anonymous
31 окт 2023, 06:02

Вернуться в «CSS»