Как настроить радио кнопки при использовании div? - PullRequest
Новая
       24

Как настроить радио кнопки при использовании div?

0 голосов
/ 08 ноября 2019

Для опроса mcq, который я делаю, мне нужно стилизовать 3 ответа с 3 переключателями. Я искал эту проблему, но не смог найти никого, использующего тот же формат, что и я.

Логика и java-скрипт работают отлично, но я не могу найти способ выровнять 3 ответа вертикально по центру с радиокнопки слева от них.

Вот фрагмент кода: 

var elem = document.getElementById("myBar");
var width = 0;
var id = null;
var click = false;
function move() {
  var elem = document.getElementById("myBar");
  if (width < 100) {
    width+=10;
    elem.style.width = width + '%';
    elem.innerHTML = width * 1 + '%';
  }  
}

function intil() {
  questions = [ "question1 ?", 
    "question2?",
    "question3?" ];
  answers = [ ["a", "answer1"], ["b", "answer2"],["c","answer3"] ,
    ["a", "5%"], ["b", "13%"], ["c","29%"],
    ["a","4890"],["b","7589"],["c","12056"] ];       
  correctAnswers = ["a", "b" ,"c" ];
  curQuesNum=0
  previous.style.display = "none";   
  submit.style.display = "none"; 
  review.style.display = "none"; 
  retry.style.display = "none";
  img1.style.display="none"; 
  img2.style.display="none"; 
  next.addEventListener("click",showNext);
  previous.addEventListener("click",showPrev);
  submit.addEventListener("click",submits);
  retry.addEventListener("click",retrys);
  review.addEventListener("click",reviews);
  inputAnswers= Array(questions.length).fill(0)
  correctAnswer.style.display = "none"; 
  wrongAnswers=[] 
  check3=0
  check1=0
}
    

function showQuiz() { 
  checkSlide() 
  document.getElementById("question").innerHTML= curQuesNum+1+") "+questions[curQuesNum]
  document.getElementById("answer1").innerHTML= answers[(3*curQuesNum)][0]+": "+answers[(3*curQuesNum)][1];
  document.getElementById("answer2").innerHTML= answers[(3*curQuesNum)+1][0]+": "+answers[(3*curQuesNum)+1][1];
  document.getElementById("answer3").innerHTML= answers[(3*curQuesNum)+2][0]+": "+answers[(3*curQuesNum)+2][1];
  document.getElementById("correctAnswer").innerHTML="The correct answer is: "+correctAnswers[curQuesNum];
}

function checkSlide(){
  if (curQuesNum!==0) { 
    previous.style.display = "inline-block"; 
  } else {
      previous.style.display = "none"; 
  }
  if (curQuesNum===questions.length-1) { 
    next.style.display = "none";
    if (check3==0) {
      submit.style.display = "inline-block";
    }           
  }
  if (curQuesNum!==questions.length-1) { 
    next.style.display = "inline-block";
    submit.style.display = "none"; 
  }  
}

function checkinput() {
  if (check3==0) {
    check2=0
    var radios = document.getElementsByName('mcq');
    var radiosVal;
    for(var i = 0; i < radios.length; i++) {
      if(radios[i].checked){
        radiosVal = radios[i].value;
        check2=1;
      }
    }
    if (check2==1) {
      inputAnswers[curQuesNum]=radiosVal
    } else {
      inputAnswers[curQuesNum]=0
    }
  }    
} 

function clearRadio(){
  if (inputAnswers[curQuesNum]==0) {
    var ele = document.getElementsByName("mcq");
    for(var i=0;i<ele.length;i++) 
      ele[i].checked = false;    
  } 
}

function showResults() {
  numCorrect = 0;
  for(var i=0;i<questions.length;i++) {
    if (inputAnswers[i]==correctAnswers[i]) {
      numCorrect++
    } else {
      wrongAnswers.push(i);
    }  
  }
  var percentage = numCorrect / questions.length;
  var outMessage;
  if (percentage >= 0.9) {
    outMessage = 'Great job! You are an Expert!'
  } else if (percentage >= .75) {
    outMessage = 'Pritty good! Keep improving!.';
    var image = document.getElementById('img1');
    image.src = "silver.jpg";
  } else if (percentage >= .5) {
    outMessage = 'Not bad. Keep practicing!';
    var image = document.getElementById('img1');
    image.src = "bronze.jpg";
  } else {
    outMessage = 'Ohoh you need to catch up!';
    var image = document.getElementById('img1');
    image.src = "4th.jpg";
  }  
  document.getElementById("resultMessage").innerHTML=outMessage
  img1.style.display="block" 
  document.getElementById("results").innerHTML = "You got </br>"+ numCorrect+" out of "+ questions.length;
}

function reviews() {  
  check3=1
  curQuesNum=0
  showQuiz()
  clearRadio()
  selectRadio()
  showRev()
  img2.style.display="inline-block";     
  img1.style.display="none";  
  question.style.display = "block";
  radio1.style.display = "block";
  answer1.style.display = "block";
  radio2.style.display = "block";
  answer2.style.display = "block";
  radio3.style.display = "block";
  answer3.style.display = "block";
  answer3.style.display = "block";
  review.style.display = "none";
  results.style.display = "none";
  resultMessage.style.display = "none";
  next.style.display = "inline-block";
  myProgress.style.display = "none";
  myBar.style.display = "none";
}

function showRev() {
  if (check3==1) {
    if (wrongAnswers.includes(curQuesNum)) {      	
      var image2 = document.getElementById('img2');
      image2.src = "cross.jpg";
      correctAnswer.style.display = "block";
    } else{
      var image2 = document.getElementById('img2');
      image2.src = "tick.jpg";
      correctAnswer.style.display = "none";
    } 
  }
}

function submits() {  
  checkinput()
  curQuesNum++
  move()
  retry.style.display = "inline-block";
  question.style.display = "none"
  radio1.style.display = "none"
  answer1.style.display = "none"
  radio2.style.display = "none"
  answer2.style.display = "none"
  radio3.style.display = "none"
  answer3.style.display = "none"
  previous.style.display = "none"
  submit.style.display = "none"
  review.style.display = "inline-block";
  showResults()  
}

function selectRadio() {
  var temp=inputAnswers[curQuesNum]
  if (temp=="a") {
    document.getElementById("rad1").checked = true;
  }
  if (temp=="b") {
    document.getElementById("rad2").checked = true;
  }
  if (temp=="c") {
    document.getElementById("rad3").checked = true;
  }
} 
    
function retrys() {
  location.reload()
}

function showNext() {  
  checkinput()
  if (check1==0){      
    move();    
    
  } else {
    check1++;   
  }  
  curQuesNum++  
  clearRadio()
  selectRadio()
  showRev()  
  showQuiz()         
}

function showPrev() {
  check1--   
  checkinput()  
  curQuesNum--
  clearRadio()
  selectRadio()
  showRev()  
  showQuiz()  
}

function main() {
  intil()
  showQuiz()
}

main()
@import url(https://fonts.googleapis.com/css?family=Work+Sans:300,600);
#myProgress {
  margin:20px;
  width: 90%;
  background-color: #ddd;
  text-align: center;
  outline-style: solid;
}

.progress { 
  margin-left: auto; 
  margin-right:auto; 
}

#myBar {
  width: 5%;
  height: 40px;
  background-color: #38a;  
  text-align: center;
  line-height: 40px;
  color: black;
}



#img1{
  display: block;
  max-height:35% 
  height: auto;
  margin-left: auto;
  margin-right: auto;
  max-width: 25%; 
}

#resultMessage{
  font-weight: 300;
  margin: 0px;
  font-size: 30px;
  background-color: #f8f6f0;
  color: black;
}

#question{
  font-weight: 200;
  margin: 20px; 
  font-size: 25px;
  background-color: #f8f6f0;
  color: black;
  
}

#correctAnswer{
  font-weight: 200;
  margin: 20px; 
  font-size: 20px;
  background-color: #f8f6f0;
  color: black;
  font-style: italic;
}

#img2{
  display: inline-block;
  max-height:5% 
  height: auto;
  margin-left: auto;
  margin-right: auto;
  max-width: 5%;
}

h1{
  font-weight: 300;
  margin: 0px;
  padding: 10px
  font-size: 30px;
  background-color: #444;
  color: #fff;
}



button{
  font-family: 'Work Sans', sans-serif;
  font-size: 22px;
  background-color: #279;
  color: #fff;
  border: 0px;
  border-radius: 3px;
  padding: 20px;
  cursor: pointer;
  margin-bottom: 20px;
  margin-top: 20px;
}

button:hover{
  background-color: #38a;
}
<h1>Test Your Knowledge</h1>
<div id="question"></div>

<div id="radio1"><input type="radio" name="mcq" id="rad1" value="a"></div>
<div id="answer1"></div>
<div id="radio2"><input type="radio" name="mcq" id="rad2" value="b"></div>
<div id="answer2"></div>
<div id="radio3"><input type="radio" name="mcq" id="rad3" value="c"></div>
<div id="answer3"></div>

<img src="tick.jpg" alt="tickcross" id="img2">
<div id="correctAnswer"></div>
<div id="resultMessage"></div>
<div id="results"></div>
<img src="gold.jpg" alt="medal" id="img1">

<div id="myProgress" class="progress">
  <div id="myBar">0%</div>
</div>

<button id="previous">Previous Question</button>
<button id="next">Next Question</button>
<button id="submit">Submit Quiz</button>
<button id="review">Review</button>
<button id="retry">Retry</button>

Пожалуйста, помогите мне с CSS или любые корректировки HTML.

Ответы [ 6 ]

1 голос
/ 08 ноября 2019

Я бы использовал <label> элементы, чтобы можно было использовать функциональность захвата кликов, а так как <div> s стилизованы как блоки по умолчанию, пропуская их вообще. (Вам не нужно CSS для достижения базового выравнивания). Например

<div id="radio1">
  <input type="radio" name="mcq" id="rad1" value="a"/>
  <label for="rad1" id="answer1">Answer 1...</label>
</div>
<div id="radio2">
  <input type="radio" name="mcq" id="rad2" value="b"/>
  <label for="rad2" id="answer2">Answer 2...</label>
</div>
<div id="radio3">
  <input type="radio" name="mcq" id="rad3" value="c"/>
  <label for="rad3" id="answer3">Answer 3...</label>
</div>
0 голосов
/ 08 ноября 2019

Попробуйте это: 

<div>
 <input type="radio" name="gender" value="male" checked> Male<br>
  <input type="radio" name="gender" value="female"> Female<br>
  <input type="radio" name="gender" value="other"> Other
</div>
0 голосов
/ 08 ноября 2019

Попробуйте этот код

HTML 

<div class="wrapper">
<h1>Test Your Knowledge</h1>
<div id="question"></div>

<div id="radio1">
  <input type="radio" name="mcq" id="radioid1" value="a">
  <label for="radioid1" id="answer1">a: answer1</label>
</div>

<div id="radio2">
  <input type="radio" name="mcq" id="radioid2" value="b">
  <label for="radioid2" id="answer1">b: answer2</label>
</div>

<div id="radio3">
  <input type="radio" name="mcq" id="radioid3" value="c">
    <label for="radioid3" id="answer3">c: answer3</label>
</div>


<img src="tick.jpg" alt="tickcross" id="img2">
<div id="correctAnswer"></div>
<div id="resultMessage"></div>
<div id="results"></div>
<img src="gold.jpg" alt="medal" id="img1">

<div id="myProgress" class="progress">
  <div id="myBar">0%</div>
</div>

<button id="previous">Previous Question</button>
<button id="next">Next Question</button>
<button id="submit">Submit Quiz</button>
<button id="review">Review</button>
<button id="retry">Retry</button>

  </div>

CSS 

@import url(https://fonts.googleapis.com/css?family=Work+Sans:300,600);
*{
  margin:0;
}
body{
  background: #3696c6;
  font-family: 'Work Sans', sans-serif;

}
.wrapper{
  padding:20px;
}
#myProgress {
margin: 20px;
    width: 100%;
    background-color: #ddd;
    text-align: center;
    border: 1px solid black;
    box-shadow: 0px 0px 3px 0px #0a4953;
}

.progress { 
  margin-left: auto; 
  margin-right:auto; 
}

#myBar {
    width: 5%;
    height: 40px;
    background-color: #8BC34A;
    text-align: center;
    line-height: 40px;
    color: black;
}



#img1{
  display: block;
  max-height:35% 
  height: auto;
  margin-left: auto;
  margin-right: auto;
  max-width: 25%; 
}

#resultMessage{
  font-weight: 300;
  margin: 0px;
  font-size: 30px;
  background-color: #f8f6f0;
  color: black;
}

#question{
    font-weight: 600;
    margin: 20px 0;
    padding: 20px;
    font-size: 25px;
    background-color: #f8f6f0;
    color: black;

}

#correctAnswer{
  font-weight: 200;
  margin: 20px; 
  font-size: 20px;
  background-color: #f8f6f0;
  color: black;
  font-style: italic;
}

#img2{
  display: inline-block;
  max-height:5% 
  height: auto;
  margin-left: auto;
  margin-right: auto;
  max-width: 5%;
}

h1{
      font-weight: 600;
    margin: 0px;
    padding: 20px;
    font-size: 30px;
    background-color: #444;
    color: #fff;
}



button{
font-family: 'Work Sans', sans-serif;
    font-size: 22px;
    background-color: #279;
    color: #fff;
    border: 0px;
    border-radius: 3px;
    padding: 20px;
    cursor: pointer;
    margin: 20px;
      border: 1px solid black;
    box-shadow: 0px 0px 3px 0px #0a4953;
}

button:hover{
  background-color: #38a;
}

[id^=radio]{
display: flex;
    font-size: 20px;
    padding: 5px 20px;
    line-height: 0.9;
}
[id^=answer]{
      padding-left: 10px;

}
input[type="radio"]{
        width: 15px;
    height: 15px;
}

ВЫХОД

enter image description here

0 голосов
/ 08 ноября 2019

Просто добавьте style="float: left" в радиоэлементы 

    <div id="radio1"><input type="radio" name="mcq" id="rad1" value="a" style="float: left"></div>
    <div id="answer1">Answer1</div>
    <div id="radio2"><input type="radio" name="mcq" id="rad2" value="b" style="float: left"></div>
    <div id="answer2">Answer2</div>
    <div id="radio3"><input type="radio" name="mcq" id="rad3" value="c" style="float: left"></div>
    <div id="answer3">Answer3</div>
0 голосов
/ 08 ноября 2019

Вы можете использовать flexbox для достижения этой цели. Вам нужно обернуть ваш див с ответом внутри одного с переключателем следующим образом: 

    <div id="radio1" style="display: flex;">
        <input type="radio" name="mcq" id="rad1" value="a">
        <div id="answer1">Answer 1</div>
    </div>
0 голосов
/ 08 ноября 2019

Вы можете использовать flexbox для этого. 

.wrapper {
  display: flex;
}

div[id^="answer"] {
  margin-left: 0.5rem;
}
<div class="wrapper">
  <div id="radio1"><input type="radio" name="mcq" id="rad1" value="a"></div>
  <div id="answer1">Answer 1</div>
</div>
<div class="wrapper">
  <div id="radio2"><input type="radio" name="mcq" id="rad2" value="b"></div>
  <div id="answer2">Answer 2</div>
</div>
<div class="wrapper">
  <div id="radio3"><input type="radio" name="mcq" id="rad3" value="c"></div>
  <div id="answer3">Answer 3</div>
</div>
...