We Keep Coding

Filling next available box with a random number, if first box is occupied - JS

Very new to coding and this website in particular.
I am trying to create a 'Countdown'-style numbers game which involves trying to reach a target number using 6 random numbers. There are two categories of numbers: small numbers (1-10) and large numbers (25,50,75,100). I have created a button for each category which randomly generates a number within that category.
I am able to randomly generate these numbers and populate the first card slot using .onclick method, but I am unable to populate the next 5 card slots; every time I click it randomly generates a number in the same 1st card slot.
The goal is to populate the next card slot every time I click, not all slots at once.
I am using JS. Please see attached code.
Apologies in advance for errors as this is my first post!
HTML:
//Click on small number button to generate a random small number
document.getElementById("small_number_card").onclick = function(){
genSmallNumber();
}
document.getElementById("large_number_card").onclick = function(){
genLargeNumber();
}
//FUNCTIONS//
//Generate random small number from array
function genSmallNumber(){
var smallArray = Array(1,1,2,2,3,3,4,4,5,5,6,6,7,7,8,8,9,9,10,10);
var smallNumber = smallArray[Math.floor(Math.random()*smallArray.length)];
var cardSlot = 1;
document.getElementById("box"+cardSlot).innerHTML = smallNumber;
}
//Generate random large number from array
function genLargeNumber(){
var largeArray = Array(25,50,75,100);
var largeNumber = largeArray[Math.floor(Math.random()*largeArray.length)];
var cardSlot = 1;
document.getElementById("box"+cardSlot).innerHTML = largeNumber;
}
```
*{
font-family: monospace, 'Courier New';
}
html{
height: 100%;
background: radial-gradient(circle, white, grey);
}
::placeholder{
color: black;
opacity: 0.5;
text-transform: uppercase;
font-size: 20px;
line-height: 27px;
text-align: left;
}
#container{
width: 600px;
height: 1000px;
background: blue;
margin: 15px auto;
position: relative;
border-radius: 10px;
text-align: center;
padding: 1px;
}
#target_box{
width: 500px;
height: 200px;
background: #17bef6;
border-radius: 10px;
margin: 15px 45px;
position: relative;
border: 5px solid grey;
}
#target_number_box{
width: 200px;
height: 80px;
font-size: 80px;
line-height: 80px;
margin: 14px 150px;
background: black;
border: 5px solid grey;
color: yellow;
}
#target{
margin: 0;
padding: 0;
float: left;
width: 200px;
}
#start_button{
background: red;
width: 50px;
height: 50px;
position: absolute;
top: 0;
right: 0;
margin: 29px 45px;
border-radius: 50px;
border: 5px solid grey;
cursor: pointer;
text-align: center;
font-size: 15px;
line-height: 50px;
color: white;
}
#start_button:active{
top: 5px;
border-bottom: none;
}
#selection_box{
position: absolute;
background: grey;
height: 60px;
width: auto;
border: 5px solid grey;
left: 50px;
bottom: 14px;
color: white;
text-align: center;
line-height: 60px;
font-size: 30px;
}
.box{
float: left;
width: 60px;
height: 60px;
background: blue;
margin-right: 6px;
}
#box6{
margin-right: 0;
}
#whiteboard{
background: white;
width: 550px;
height: 140px;
border-radius: 10px;
border: 5px solid grey;
position: absolute;
left: 20px;
top: 240px;
}
#working_area{
width: 530px;
height: 120px;
padding: 10px;
margin: 0;
outline: none;
border: none;
border-radius: 10px;
font-size: 20px;
color: black;
background-image: linear-gradient(to right, #e8eded 1px, transparent 1px), linear-gradient(to bottom, #e8eded 1px, transparent 1px);
background-size: 30px 30px;
line-height: 27px;
resize: none;
}
#card_selection_box{
background: #17bef6;
height: 120px;
width: 550px;
position: absolute;
top: 405px;
left: 20px;
border-radius: 10px;
border: 5px solid grey;
}
#small_number_box{
float: left;
width: 275px;
height: 120px;
}
#large_number_box{
float: right;
width: 275px;
height: 120px;
}
.number_card{
width: 60px;
height: 60px;
background: blue;
border: 5px solid grey;
font-size: 30px;
color: white;
line-height: 60px;
cursor: pointer;
}
.number_card:active{
bottom: 5px;
border-bottom: none;
}
#small_number_card{
position: absolute;
left: 102.5px;
bottom: 10px;
}
#large_number_card{
position: absolute;
right: 102.5px;
bottom: 10px;
}
#counter_box{
background: #17bef6;
height: 120px;
width: 550px;
position: absolute;
top: 405px;
left: 20px;
border-radius: 10px;
border: 5px solid grey;
margin: 0;
padding: 0;
line-height: 120px;
font-size: 100px;
color: white;
display: none;
}
```
<div id="container">
<div id="target_box">
<div id="target_number_box">
<span id="target">100</span>
<div id="start_button">Start</div>
<div id="selection_box">
<div class="box" id="box1"></div>
<div class="box" id="box2"></div>
<div class="box" id="box3"></div>
<div class="box" id="box4"></div>
<div class="box" id="box5"></div>
<div class="box" id="box6"></div>
</div>
</div>
</div>
<div id="whiteboard">
<textarea id="working_area" placeholder="Use this area as a working space..."></textarea>
</div>
<div id="card_selection_box">
<div id="small_number_box">
Small number<br/>(1-10)
<div class="number_card" id="small_number_card">
S
</div>
</div>
<div id="large_number_box">
Large number<br/>(25, 50, 75, 100)
<div class="number_card" id="large_number_card">
L
</div>
</div>
</div>
<div id="counter_box">
<span id="counter_value">30</span>
</div>
</div>
Thanks in advance! Please avoid JQuery type answers - I'm a noob!

you need to make variable cardSlot as global or put it outside the function
var cardSlot = 1; // ==> make it global
document.getElementById("small_number_card").onclick = function() {
genSmallNumber();
}
document.getElementById("large_number_card").onclick = function() {
genLargeNumber();
}
//FUNCTIONS//
function checkResetCardSlot() {
if (cardSlot > 6) {
cardSlot = 1;
// comment or remove below if you want to keep previous value
document.querySelectorAll('#selection_box .box').forEach(function(box) {
box.textContent = "";
})
}
}
//Generate random small number from array
function genSmallNumber() {
var smallArray = Array(1, 1, 2, 2, 3, 3, 4, 4, 5, 5, 6, 6, 7, 7, 8, 8, 9, 9, 10, 10);
var smallNumber = smallArray[Math.floor(Math.random() * smallArray.length)];
checkResetCardSlot();
document.getElementById("box" + cardSlot).innerHTML = smallNumber;
cardSlot++; // update the number here
}
//Generate random large number from array
function genLargeNumber() {
var largeArray = Array(25, 50, 75, 100);
var largeNumber = largeArray[Math.floor(Math.random() * largeArray.length)];
checkResetCardSlot();
document.getElementById("box" + cardSlot).innerHTML = largeNumber;
cardSlot++; // and here
}
``` * {
font-family: monospace, 'Courier New';
}
html {
height: 100%;
background: radial-gradient(circle, white, grey);
}
::placeholder {
color: black;
opacity: 0.5;
text-transform: uppercase;
font-size: 20px;
line-height: 27px;
text-align: left;
}
#container {
width: 600px;
height: 1000px;
background: blue;
margin: 15px auto;
position: relative;
border-radius: 10px;
text-align: center;
padding: 1px;
}
#target_box {
width: 500px;
height: 200px;
background: #17bef6;
border-radius: 10px;
margin: 15px 45px;
position: relative;
border: 5px solid grey;
}
#target_number_box {
width: 200px;
height: 80px;
font-size: 80px;
line-height: 80px;
margin: 14px 150px;
background: black;
border: 5px solid grey;
color: yellow;
}
#target {
margin: 0;
padding: 0;
float: left;
width: 200px;
}
#start_button {
background: red;
width: 50px;
height: 50px;
position: absolute;
top: 0;
right: 0;
margin: 29px 45px;
border-radius: 50px;
border: 5px solid grey;
cursor: pointer;
text-align: center;
font-size: 15px;
line-height: 50px;
color: white;
}
#start_button:active {
top: 5px;
border-bottom: none;
}
#selection_box {
position: absolute;
background: grey;
height: 60px;
width: auto;
border: 5px solid grey;
left: 50px;
bottom: 14px;
color: white;
text-align: center;
line-height: 60px;
font-size: 30px;
}
.box {
float: left;
width: 60px;
height: 60px;
background: blue;
margin-right: 6px;
}
#box6 {
margin-right: 0;
}
#whiteboard {
background: white;
width: 550px;
height: 140px;
border-radius: 10px;
border: 5px solid grey;
position: absolute;
left: 20px;
top: 240px;
}
#working_area {
width: 530px;
height: 120px;
padding: 10px;
margin: 0;
outline: none;
border: none;
border-radius: 10px;
font-size: 20px;
color: black;
background-image: linear-gradient(to right, #e8eded 1px, transparent 1px), linear-gradient(to bottom, #e8eded 1px, transparent 1px);
background-size: 30px 30px;
line-height: 27px;
resize: none;
}
#card_selection_box {
background: #17bef6;
height: 120px;
width: 550px;
position: absolute;
top: 405px;
left: 20px;
border-radius: 10px;
border: 5px solid grey;
}
#small_number_box {
float: left;
width: 275px;
height: 120px;
}
#large_number_box {
float: right;
width: 275px;
height: 120px;
}
.number_card {
width: 60px;
height: 60px;
background: blue;
border: 5px solid grey;
font-size: 30px;
color: white;
line-height: 60px;
cursor: pointer;
}
.number_card:active {
bottom: 5px;
border-bottom: none;
}
#small_number_card {
position: absolute;
left: 102.5px;
bottom: 10px;
}
#large_number_card {
position: absolute;
right: 102.5px;
bottom: 10px;
}
#counter_box {
background: #17bef6;
height: 120px;
width: 550px;
position: absolute;
top: 405px;
left: 20px;
border-radius: 10px;
border: 5px solid grey;
margin: 0;
padding: 0;
line-height: 120px;
font-size: 100px;
color: white;
display: none;
}
```
<div id="container">
<div id="target_box">
<div id="target_number_box">
<span id="target">100</span>
<div id="start_button">Start</div>
<div id="selection_box">
<div class="box" id="box1"></div>
<div class="box" id="box2"></div>
<div class="box" id="box3"></div>
<div class="box" id="box4"></div>
<div class="box" id="box5"></div>
<div class="box" id="box6"></div>
</div>
</div>
</div>
<div id="whiteboard">
<textarea id="working_area" placeholder="Use this area as a working space..."></textarea>
</div>
<div id="card_selection_box">
<div id="small_number_box">
Small number<br/>(1-10)
<div class="number_card" id="small_number_card">
S
</div>
</div>
<div id="large_number_box">
Large number<br/>(25, 50, 75, 100)
<div class="number_card" id="large_number_card">
L
</div>
</div>
</div>
<div id="counter_box">
<span id="counter_value">30</span>
</div>
</div>

How can I solve the problem of my quiz project?

I've been working on this project for a while. I found the code from the Internet. I have never created a quiz game before. I edited the code a little. But unfortunately there are some problems with the code, which are difficult for me.
So far only digits are represented as questions. I want letters to be used for questions as well. The button to run the game, the limited reflection time and the score works. Unfortunately, if you press the right answer, the spear doesn't go on, but stops, but you get a point. I want that after a correct answer new questions are added and that the user gets a point. If the user presses the wrong answer, I want the game to stop and the scores achieved to be displayed.
let playing=false;
let score=0;
let action;
let timeremain;
document.getElementById('start').onclick=function(){
if(playing===true)
{
location.reload();
}
else
{
playing=true;
document.getElementById('scoreValue').innerHTML = score ;
document.getElementById('time').style.display="block";
timeremain=60;
genQA();
document.getElementById('start').innerHTML="Reset Game";
startCount();
}
}
function startCount()
{
action = setInterval(function(){
timeremain -=1;
document.getElementById('timeremain').innerHTML = timeremain;
if(timeremain===0)
{
document.getElementById('time').style.display="none";
gameOver();
}
},1000);
}
function gameOver()
{
document.getElementById('gameover').style.display="block";
document.getElementById('scoreno').innerHTML=score;
}
function genQA() {
var x=Math.round(10*Math.random());
var y=Math.round(10*Math.random());
correctAnswer= x*y;
document.getElementById('qtn').textContent=x +' x '+y;
var correctPostion= 1+Math.round(3*Math.random());
document.getElementById('option'+correctPostion).innerHTML=correctAnswer;
}
for(i=1;i<5;i++)
{
document.getElementById('option'+i).onclick=function(){
if(playing===true)
{
if(this.innerHTML==correctAnswer)
{
score++;
document.getElementById('scoreValue').innerHTML = score ;
hide('try');
show('correct');
setTimeout(function(){
hide('correct');
},1000);
genQA();
}else{
show('try');
hide('correct');
setTimeout(function(){
hide('try');
},1000);
}
}
}
}
body,html
{
background-color: darkgray
}
.container
{
width: 600px;
height: 450px;
border: 1px solid blue;
margin: 100px auto;
/* margin-top: 150px;*/
background-color: #9DD2EA;
border-radius: 15px;
padding: 15px;
box-shadow: -4px 4px 14px;
position: relative;
}
#score
{
border: 1px solid #3affa3;
font-size: 15px;
position: absolute;
background-color: #3affa3;
box-shadow: 0px 1px 5px;
left: 500px;
font-family:sans-serif;
padding: 3px;
border-radius: 8px;
}
#try
{
border: 1px solid #f22929;
background-color: #f22929;
position: absolute;
left: 260px;
padding: 3px;
font-size: 15px;
font-family: sans-serif;
font-weight: bold;
box-shadow: 0px 1px 5px;
color: aliceblue;
display: none;
}
#correct
{
display: none;
border: 1px solid #f22929;
background-color: #43f128;
position: absolute;
left: 250px;
padding: 3px;
font-size: 15px;
font-family: sans-serif;
font-weight: bold;
box-shadow: 0px 1px 5px;
color: aliceblue;
}
#qtn
{
width: 450px;
height: 150px;
border: 1px solid blue;
margin: 50px auto 10px auto;
/* margin-top: 150px;*/
background-color: #80c3f7;
border-radius: 15px;
padding: 15px;
box-shadow: -4px 4px 14px;
position: relative;
text-align: center;
font-size: 70px;
font-family: cursive , sans-serif;
}
#note
{
width: 450px;
height: 20px;
border: 1px solid blue;
margin: 10px auto 10px auto ;
/* margin-top: 150px;*/
background-color: #80c3f7;
border-radius: 15px;
padding: 15px;
box-shadow: -4px 4px 14px;
position: relative;
font-size: 20px;
text-align: center;
font-family: sans-serif;
color: black;
}
.option
{
position: relative;
margin-left: 90px ;
position: relative;
transition: all 0.12s;
}
#option1
{
width: 100px;
height: 60px;
border: 1px solid white;
position: absolute;
background-color: #ffffff;
text-align: center;
font-size: 25px;
padding-top: 40px;
box-shadow: 0px 5px 5px;
border-radius: 5px;
cursor: pointer;
}
#option2
{
width: 100px;
height: 60px;
border: 1px solid white;
position: absolute;
left: 110px;
background-color: #ffffff;
text-align: center;
font-size: 25px;
padding-top: 40px;
box-shadow: 0px 5px 5px;
border-radius: 5px;
cursor: pointer;
}
#option3
{
width: 100px;
height: 60px;
border: 1px solid white;
position: absolute;
left: 220px;
background-color: #ffffff;
text-align: center;
font-size: 25px;
padding-top: 40px;
box-shadow: 0px 5px 5px;
border-radius: 5px;
cursor: pointer;
}
#option4
{
width: 100px;
height: 60px;
border: 1px solid white;
position: absolute;
left: 330px;
background-color: #ffffff;
text-align: center;
font-size: 25px;
padding-top: 40px;
box-shadow: 0px 5px 5px;
border-radius: 5px;
cursor: pointer;
}
#start
{
border: 1px solid #3affa3;
font-size: 15px;
position: absolute;
background-color: #CEE9F5;
box-shadow: 0px 1px 5px;
top: 440px;
left: 280px;
font-family:sans-serif;
padding: 3px;
border-radius: 8px;
font-weight: bold;
font-family: sans-serif;
background-color: #ffffff;
}
#option1:hover
{
background-color: #9DD2EA;
box-shadow: 0px 5px 5px purple;
}
#option2:hover
{
background-color: #9DD2EA;
box-shadow: 0px 5px 5px purple;
}
#option3:hover
{
background-color: #9DD2EA;
box-shadow: 0px 5px 5px purple;
}
#option4:hover
{
background-color: #9DD2EA;
box-shadow: 0px 5px 5px purple;
}
#option1:active
{
background-color: #9DD2EA;
box-shadow: 0px 0px 0px purple;
top: 5px;
}
#option2:active
{
background-color: #9DD2EA;
box-shadow: 0px 0px 0px purple;
top: 5px;
}
#option3:active
{
background-color: #9DD2EA;
box-shadow: 0px 0px 0px purple;
top: 5px;
}
#option4:active
{
background-color: #9DD2EA;
top: 5px;
box-shadow: 0px 0px 0px purple;
}
#start:hover
{
cursor: pointer;
background-color: #9DD2EA;
box-shadow: 0px 5px 5px purple;
}
#start:active
{
background-color: #9DD2EA;
top: 445px;
box-shadow: 0px 0px 0px ;
}
#time
{
width: 150px;
height: 25px;
background-color: burlywood;
border: 1px solid;
position: absolute;
left: 450px;
top: 440px;
border-radius: 5px;
box-shadow: 0px 5px 5px ;
font-weight: bold;
display: none;
}
#gameover
{
width: 400px;
height: 100px;
background-color: coral;
position: absolute;
top: 120px;
text-align: center;
padding: 100px;
font-size: 40px;
color: white;
display: none;
}
<!DOCTYPE html>
<html lang="en">
<head>
<title>Math Quiz</title>
<meta name="viewport" content="width=device-width, initial-scale=1 , user-scalable=yes" >
<link rel="stylesheet" type="text/css" href="Style.css">
</head>
<body>
<div class="container">
<div id="correct">Correct</div>
<div id="try">Try Again</div>
<div id="score">
SCORE:
<span id="scoreValue">0</span>
</div>
<div id="qtn"></div>
<div id="note">Click on the Right Answer</div>
<div class="option">
<div id="option1"></div>
<div id="option2"></div>
<div id="option3"></div>
<div id="option4"></div>
</div>
<div id="start" class="box">Start Game</div>
<div id="time">Time Remaing: <span id="timeremain">0</span></div>
<div id="gameover">GAME OVER YOUR SCORE :<span id="scoreno">0</span></div>
</div>
<script src="main.js" type="text/javascript"></script>
</div>
</body>
</html>

I looked at your javascript code and i found some solutions .
This code will works for you . Its a little different : i corrected some errors .
I also added the classes for 'correct' and 'try' and modified the css file .
Here you are your corrected codes :
Javascript code:
let playing=false;
let score=0;
let action;
let timeremain;
document.getElementById('start').onclick=function(){
if(playing===true)
{
location.reload();
}
else
{
playing=true;
document.getElementById('scoreValue').innerHTML = score ;
document.getElementById('time').style.display="block";
timeremain=60;
genQA();
document.getElementById('start').innerHTML="Reset Game";
startCount();
}
}
function startCount()
{
action = setInterval(function(){
timeremain -=1;
document.getElementById('timeremain').innerHTML = timeremain;
if(timeremain===0)
{
document.getElementById('time').style.display="none";
gameOver();
}
},1000);
}
function gameOver()
{
document.getElementById('gameover').style.display="block";
document.getElementById('scoreno').innerHTML=score;
}
function genQA() {
var x=Math.round(10*Math.random());
var y=Math.round(10*Math.random());
correctAnswer= x*y;
document.getElementById('qtn').textContent=x +' x '+y;
var correctPostion= 1+Math.round(3*Math.random());
document.getElementById('option'+correctPostion).innerHTML=correctAnswer;
}
for(i=1;i<5;i++)
{
document.getElementById('option'+i).onclick=function(){
if(playing===true)
{
if(this.innerHTML==correctAnswer)
{
score++;
document.getElementById('scoreValue').innerHTML = score ;
document.getElementById('try').innerHTML=""
document.getElementById('correct').innerHTML="Correct";
setTimeout(function(){
document.getElementById('correct').innerHTML="";
},1000);
genQA();
}else{
document.getElementById('try').innerHTML="Try Again";
document.getElementById('correct').innerHTML="";
setTimeout(function(){
document.getElementById('try').innerHTML="";
},1000);
}
}
}
}
Css file :
body,html
{
background-color: darkgray
}
.container
{
width: 600px;
height: 450px;
border: 1px solid blue;
margin: 100px auto;
/* margin-top: 150px;*/
background-color: #9DD2EA;
border-radius: 15px;
padding: 15px;
box-shadow: -4px 4px 14px;
position: relative;
}
#score
{
border: 1px solid #3affa3;
font-size: 15px;
position: absolute;
background-color: #3affa3;
box-shadow: 0px 1px 5px;
left: 500px;
font-family:sans-serif;
padding: 3px;
border-radius: 8px;
}
#try
{
border: 1px solid #f22929;
background-color: #f22929;
position: absolute;
left: 260px;
padding: 3px;
font-size: 15px;
font-family: sans-serif;
font-weight: bold;
box-shadow: 0px 1px 5px;
color: aliceblue;
display: block;
}
#correct
{
display: block;
border: 1px solid #f22929;
background-color: #43f128;
position: absolute;
left: 250px;
padding: 3px;
font-size: 15px;
font-family: sans-serif;
font-weight: bold;
box-shadow: 0px 1px 5px;
color: aliceblue;
}
#qtn
{
width: 450px;
height: 150px;
border: 1px solid blue;
margin: 50px auto 10px auto;
/* margin-top: 150px;*/
background-color: #80c3f7;
border-radius: 15px;
padding: 15px;
box-shadow: -4px 4px 14px;
position: relative;
text-align: center;
font-size: 70px;
font-family: cursive , sans-serif;
}
#note
{
width: 450px;
height: 20px;
border: 1px solid blue;
margin: 10px auto 10px auto ;
/* margin-top: 150px;*/
background-color: #80c3f7;
border-radius: 15px;
padding: 15px;
box-shadow: -4px 4px 14px;
position: relative;
font-size: 20px;
text-align: center;
font-family: sans-serif;
color: black;
}
.option
{
position: relative;
margin-left: 90px ;
position: relative;
transition: all 0.12s;
}
#option1
{
width: 100px;
height: 60px;
border: 1px solid white;
position: absolute;
background-color: #ffffff;
text-align: center;
font-size: 25px;
padding-top: 40px;
box-shadow: 0px 5px 5px;
border-radius: 5px;
cursor: pointer;
}
#option2
{
width: 100px;
height: 60px;
border: 1px solid white;
position: absolute;
left: 110px;
background-color: #ffffff;
text-align: center;
font-size: 25px;
padding-top: 40px;
box-shadow: 0px 5px 5px;
border-radius: 5px;
cursor: pointer;
}
#option3
{
width: 100px;
height: 60px;
border: 1px solid white;
position: absolute;
left: 220px;
background-color: #ffffff;
text-align: center;
font-size: 25px;
padding-top: 40px;
box-shadow: 0px 5px 5px;
border-radius: 5px;
cursor: pointer;
}
#option4
{
width: 100px;
height: 60px;
border: 1px solid white;
position: absolute;
left: 330px;
background-color: #ffffff;
text-align: center;
font-size: 25px;
padding-top: 40px;
box-shadow: 0px 5px 5px;
border-radius: 5px;
cursor: pointer;
}
#start
{
border: 1px solid #3affa3;
font-size: 15px;
position: absolute;
background-color: #CEE9F5;
box-shadow: 0px 1px 5px;
top: 440px;
left: 280px;
font-family:sans-serif;
padding: 3px;
border-radius: 8px;
font-weight: bold;
font-family: sans-serif;
background-color: #ffffff;
}
#option1:hover
{
background-color: #9DD2EA;
box-shadow: 0px 5px 5px purple;
}
#option2:hover
{
background-color: #9DD2EA;
box-shadow: 0px 5px 5px purple;
}
#option3:hover
{
background-color: #9DD2EA;
box-shadow: 0px 5px 5px purple;
}
#option4:hover
{
background-color: #9DD2EA;
box-shadow: 0px 5px 5px purple;
}
#option1:active
{
background-color: #9DD2EA;
box-shadow: 0px 0px 0px purple;
top: 5px;
}
#option2:active
{
background-color: #9DD2EA;
box-shadow: 0px 0px 0px purple;
top: 5px;
}
#option3:active
{
background-color: #9DD2EA;
box-shadow: 0px 0px 0px purple;
top: 5px;
}
#option4:active
{
background-color: #9DD2EA;
top: 5px;
box-shadow: 0px 0px 0px purple;
}
#start:hover
{
cursor: pointer;
background-color: #9DD2EA;
box-shadow: 0px 5px 5px purple;
}
#start:active
{
background-color: #9DD2EA;
top: 445px;
box-shadow: 0px 0px 0px ;
}
#time
{
width: 150px;
height: 25px;
background-color: burlywood;
border: 1px solid;
position: absolute;
left: 450px;
top: 440px;
border-radius: 5px;
box-shadow: 0px 5px 5px ;
font-weight: bold;
display: none;
}
#gameover
{
width: 400px;
height: 100px;
background-color: coral;
position: absolute;
top: 120px;
text-align: center;
padding: 100px;
font-size: 40px;
color: white;
display: none;
}
Html Page :
<!DOCTYPE html>
<html lang="en">
<head>
<title>Math Quiz</title>
<meta name="viewport" content="width=device-width, initial-scale=1 , user-
scalable=yes" >
<link rel="stylesheet" type="text/css" href="Style.css">
</head>
<body>
<div class="container">
<div id="correct" class="correct">Correct</div>
<div id="try" class="try">Try Again</div>
<div id="score">
SCORE:
<span id="scoreValue">0</span>
</div>
<div id="qtn"></div>
<div id="note">Click on the Right Answer</div>
<div class="option">
<div id="option1"></div>
<div id="option2"></div>
<div id="option3"></div>
<div id="option4"></div>
</div>
<div id="start" class="box">Start Game</div>
<div id="time">Time Remaing: <span id="timeremain">0</span></div>
<div id="gameover">GAME OVER YOUR SCORE :<span id="scoreno">0</span></div>
</div>
<script src="main.js" type="text/javascript"></script>
</div>
</body>
</html>
You only have to replace your files with this codes .
I hope it helps you ! :-)

Positioning button element on image using CSS

I am working with this UI design, where I created an avatar image and also an upload button. My challenge is positioning the upload button on the image as shown below
expectation
but this is what I came up with
document.querySelector('#btnOpenFileDialog').addEventListener('click', function() {
document.querySelector('#fileLoader').click();
});
.image-cropper {
display: inline-block;
border-radius: 50%;
border: 1px solid #f2f2f2;
overflow: hidden;
}
img {
max-width: 100%;
height: auto;
}
.edit-img-btn {
position: absolute;
color: white;
font-size: .5rem;
width: 22px;
height: 22px;
padding: 5px;
border: 0;
border-radius: 50%;
background: #4169E2;
box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.21);
}
.edit-img-btn i {
font-size: 13px;
}
<span class="image-cropper" style=" width: 150px; height: 150px;">
<img src="assets/images/avatar.jpg" alt="">
</span>
<input type="file" id="fileLoader" style="display: none;" />
<button class="edit-img-btn" id="btnOpenFileDialog"><i class="material-icons">edit</i></button>

If you place all of it inside of an inline block element with position: relative you can adjust the position to fit your needs. Below is an example.
document.querySelector('#btnOpenFileDialog').addEventListener('click', function() {
document.querySelector('#fileLoader').click();
});
/*wrapper with position: relative */
.image-wrapper {
position: relative;
}
.image-cropper {
display: inline-block;
border-radius: 50%;
border: 1px solid #f2f2f2;
overflow: hidden;
}
img {
max-width: 100%;
height: auto;
}
.edit-img-btn {
position: absolute;
bottom: 5px; /* 5px up from the bottom */
right: 35px; /* 35px in from the right */
color: white;
font-size: .5rem;
width: 22px;
height: 22px;
padding: 5px;
border: 0;
border-radius: 50%;
background: #4169E2;
box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.21);
}
.edit-img-btn i {
font-size: 13px;
}
<span class="image-wrapper">
<span class="image-cropper" style=" width: 150px; height: 150px;">
<img src="https://via.placeholder.com/150" alt="">
</span>
<button class="edit-img-btn" id="btnOpenFileDialog"><i class="material-icons">edit</i></button>
<input type="file" id="fileLoader" style="display: none;" />
</span>

Add css properties top: 134px; and left: 134px; to class .edit-img-btn
document.querySelector('#btnOpenFileDialog').addEventListener('click', function() {
document.querySelector('#fileLoader').click();
});
.image-cropper {
display: inline-block;
border-radius: 50%;
border: 1px solid #f2f2f2;
overflow: hidden;
}
img {
max-width: 100%;
height: auto;
}
.edit-img-btn {
position: absolute;
top: 134px;
left: 134px;
color: white;
font-size: .5rem;
width: 22px;
height: 22px;
padding: 5px;
border: 0;
border-radius: 50%;
background: #4169E2;
box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.21);
}
.edit-img-btn i {
font-size: 13px;
}
<span class="image-cropper" style=" width: 150px; height: 150px;">
<img src="assets/images/avatar.jpg" alt="">
</span>
<input type="file" id="fileLoader" style="display: none;" />
<button class="edit-img-btn" id="btnOpenFileDialog"><i class="material-icons">edit</i></button>

within in the div iframe not displaying in html

In the code below, the left side div is displaying correctly, but the right side of the div in that iframe is displaying outside of the div. It is displaying top, but I want to display with in the div space.
html
<div id="details">
<div id="left">
<h2>Bangalore</h2>
<img src="img/vcare_logo.png" width="100" height="83" alt="smoothy html5 template" hspace="50"/>
<p><b><strong>rgd</b></strong><br>gf560032</p>
</div>
<div id="right">
<h2>Upcoming News</h2>
<iframe id="NewsWindow" seamless src="news_win.htm" width="150" height="204" marginwidth="0" marginheight="0" frameborder="0" scrolling="no" style="display: block; margin: 0 auto; padding: 0; border: #000000 1px solid;"></iframe>
</div>
</div>
css
#details {
overflow:auto;
width: 1050px;
border: 1px solid black;
background: gray;
margin: 2em auto;
}
#details h2{
background-color: #A52A2A;
color: #FFFFFF;
font: 13px arial, sans-serif;
font-weight: bold;
text-align: center;
padding: 3px;
}
#left, #right {
width: 45%;
margin:5px;
padding: 1em;
background: white;
}
#left {
float:left;
}
#right {
width: 158px;
border: #000000 1px solid;
background-color: #339999;
text-align: center;
padding: 0px 2px 7px 2px;
position: absolute;
visibility: visible;
left: 100px;
top: 100px;
z-index:3;
float:right;
}

First of all change your html code from <p><b><strong>rgd</b></strong>�� to <p><strong><b>rgd</b></strong>.
and then change your css for #right, remove absolute positioning and make it float left as:
#right {
width: 158px;
border: #000000 1px solid;
background-color: #339999;
text-align: center;
padding: 0px 2px 7px 2px;
visibility: visible;
left: 100px;
top: 100px;
z-index:3;
float:left;
}

Problems with sortable between to divs

So here is the issue, I have to divs I can't drag items, because when I release mouse button they are coming back to the original position.
Any help?
HTML
<body>
<div id="wrapper">
<div id="onHoldList" class="cellContainer">
<p>On Hold</p>
</div>
<div id="inboxList" class="cellContainer">
<p style="display: inline;">Inbox</p>
<button id="AddCardBtn">
<p>Add A Card...</p>
</button>
<div id="userAddedDiv" class="HejMedDig"></div>
</div>
</div>
</body>
CSS
body {
background-color: #DCDCDC
}
#wrapper {
margin-top: 3%;
margin-right: 20%;
height: 715px;
min-width: 300px;
min-height: 715px;
background-color: #00CCFF;
box-shadow: 7px 7px 7px #828282;
border-radius: 6px;
}
#onHoldList {
width: 275px;
height: 700px;
background-color: #f0f0f0;
border: 1px solid black;
margin-left: 1%;
margin-top: 0.4%;
border-radius: 10px;
box-shadow: 7px 7px 7px #828282;
overflow: auto;
}
#inboxList {
width: 275px;
height: 700px;
background-color: #f0f0f0;
border: 1px solid black;
margin-left: 0.5%;
margin-top: 0.4%;
border-radius: 10px;
box-shadow: 7px 7px 7px #828282;
overflow: auto;
}
.cellContainer {
width: 1%;
float: left;
margin-right: 1%;
}
#AddCardBtn {
background-color: #f0f0f0;
border: 0px;
text-decoration: none;
color: blue;
cursor: pointer;
float: right;
margin-right: 1%;
margin-top: 1%;
border-radius: 10px;
height: 4%;
width: 35%;
}
#members {
width: 275px;
height: 700px;
background-color: #f0f0f0;
border: 1px solid black;
float: right;
margin-bottom: 10%;
border-radius: 10px;
}
#userAddedDiv div {
background: red;
width: 260px;
height: 150px;
margin-left: 2.3%;
border-radius: 10px;
border: 2px solid black;
box-shadow: 0px 7px 7px #828282;
margin-bottom: 1%;
}
.createBoxButton {
display:inline-block;
padding:2px 8px;
vertical-align:middle;
text-decoration:none;
color:#000;
background:#CCC;
border:2px solid #888;
border-radius:8px;
}
.border {
border: 3px solid black;
}
JavaScript
$('document').ready(function () {
$('#AddCardBtn').click(function () {
var numberOfDiv = [100];
with(document) {
var newDiv = createElement('div');
var div = getElementById('userAddedDiv').appendChild(newDiv);
for (var i = 0; i < numberOfDiv; i++) {
numberOfDiv[i] = div;
}
}
});
$(function () {
$('#userAddedDiv').sortable({
containment: 'document',
cursor: 'crosshair',
opacity: '0.70',
connectWith: '#onHoldList',
hoverClass: '.border'
});
});
});
JSFiddle

Fiddle: http://jsfiddle.net/L2XqS/4/
You have to configure two sortable lists:
$('#userAddedDiv').sortable({
containment: 'document',
cursor: 'crosshair',
opacity: '0.70',
connectWith: '#onHoldList',
hoverClass: '.border'
});
$('#onHoldList').sortable({
containment: 'document',
cursor: 'crosshair',
opacity: '0.70',
connectWith: '#userAddedDiv',
hoverClass: '.border'
});
And to be able to to drag a div from #onHoldList to #userAddedDiv when #userAddedDiv is empty (no height):
#userAddedDiv
{
height: 90%;
}