I am building a quiz app, working fine now decided to add "boosters" (help tools for the player), I've already posted a question here about adding extra time to the timer, I am still digging to find a solution, but no luck til now.. Anyway, this is not my question now.
I started to work on the second booster: Successfully skip a question (without losing points)
So the original code (before adding the boost part) was like this:
<div id='question<?php echo $i;?>' class='cont'>
<p class='questions' id="qname<?php echo $i;?>">
<?php echo $i?>.<?php echo $result['question_name'];?></p>
<input type="radio" value="1" id='radio1_<?php echo $result['id'];?>'
name='<?php echo $result['id'];?>'/>
<?php echo $result['answer1'];?><br/>
<input type="radio" value="2" id='radio1_<?php echo $result['id'];?>'
name='<?php echo $result['id'];?>'/>
<?php echo $result['answer2'];?><br/>
<input type="radio" value="3" id='radio1_<?php echo $result['id'];?>'
name='<?php echo $result['id'];?>'/>
<?php echo $result['answer3'];?><br/>
<input type="radio" value="4" id='radio1_<?php echo $result['id'];?>'
name='<?php echo $result['id'];?>'/>
<?php echo $result['answer4'];?><br/>
<input type="radio" checked='checked' style='display:none' value="5"
id='radio1_<?php echo $result['id'];?>'
name='<?php echo $result['id'];?>'/><br/>
<button id='<?php echo $i;?>' class='next btn btn-success' type='button' >Next</button>
And this is how the points are count:
if(isset($_POST[1])){
$keys=array_keys($_POST);
$order=join(",",$keys);
//$query="select * from questions id IN($order) ORDER BY FIELD(id,$order)";
// echo $query;exit;
$response=mysql_query("select id,answer from questions where id IN($order) ORDER BY FIELD(id,$order)") or die(mysql_error());
$right_answer=0;
$wrong_answer=0;
$unanswered=0;
while($result=mysql_fetch_array($response)){
if($result['answer']==$_POST[$result['id']]){
$right_answer++;
}else if($_POST[$result['id']]==5){
$unanswered++;
}
else{
$wrong_answer++;
}
}
So my idea was about adding a button called "Success skipe"
<button id='<?php echo $success;?>' class='skip btn btn-success' type='button'>Success Skip</button>
And while counting the right answers I tried to make a condition that once this button is clicked the answer is considered correct so I added this:
while($result=mysql_fetch_array($response)){
if($success){ //Just added
$right_answer++; //this "if" condition
}
But it didn't work, what's wrong?
Related
actually i am creating a online exam webapplication in php. and i m retrieving data from database .now the prob. is how to loop data by indexing one by one..
so user view one question at a time and after clicking on submit button it display the next question by from array.
here i used array of all the rows and taking question one by one by javascript . but there is some prob. in javascript . i only render 1st question .. increment is not implementing correctly.
<input type="hidden" value="<?php echo $i=0; ?>" id="cc">
<div id="counter">
<p id="idIndex" name="id" value="<?php echo $findData[$i]['Exam']['id']; ?>"><?php echo $findData[$i]['Exam']['id']; ?> </p>
<p ><?php echo $findData[$i]['Exam']['que'];?></p>
<input type="radio" value="<?php echo $findData[$i]['Exam']['op1']; ?>" name="op1" id="jaid" ><?php echo $findData[$i]['Exam']['op1']; ?>
<input type="radio" value="<?php echo $findData[$i]['Exam']['op2']; ?>" name="op1" id="jai" ><?php echo $findData[$i]['Exam']['op2']; ?>
<input type="radio" value="<?php echo $findData[$i]['Exam']['op3']; ?>" name="op1" id="jai"><?php echo $findData[$i]['Exam']['op3']; ?>
<input type="radio" value="<?php echo $findData[$i]['Exam']['op4']; ?>" name="op1" id="jai" ><?php echo $findData[$i]['Exam']['op4']; ?>
</div>
<input type="submit" id="sub" onclick="myexam()" >
<?php echo $this->Html->script('jquery-2.2.3.min'); ?>
<script>
function myexam(value)
{
var v=$("#cc").val();
}
</script>
PHP is server side. Once your HTML is rendered, PHP has nothing more top do with it!
$("#cc").val("<?php echo $i=+1;?>");
The php echo is a string, that wont work.
var v=$("#cc").val();
v = v + 1;
$("#cc").val(v);
That should work. Fix the other line of JS similarly.
I am trying to change radio buttons in PHP to buttons from Bootstrap.
(I would also like to get rid of the submit button at the bottom of the page and have these submit the answer.)
This code works but it uses radio buttons:
<div id='javatbd<?php echo $myfname; ?>' class='col-xs-12 form-group answer-item radio-item radio' <?php echo $sDisplayStyle; ?> >
<input
class="radio"
type="radio"
value="<?php echo $code; ?>"
name="<?php echo $name; ?>"
id="answer<?php echo $name.$code; ?>"
<?php echo $checkedState;?>
onclick="if (document.getElementById('answer<?php echo $name; ?>othertext') != null) document.getElementById('answer<?php echo $name; ?>othertext').value='';checkconditions(this.value, this.name, this.type)"
aria-labelledby="label-answer<?php echo $name.$code; ?>"
/>
<label for="answer<?php echo $name.$code; ?>" class="control-label radio-label"></label>
<div class="label-text label-clickable" id="label-answer<?php echo $name.$code; ?>">
<?php echo $answer; ?>
</div>
</div>
.
.
.
<div class="col-xs-6 save-all text-right">
<button type="submit" id="movesubmitbtn" value="movesubmit" name="movesubmit" accesskey="l" class="submit button btn btn-lg btn-primary">Submit</button>
</div>
I've tried this but it does not send the value.
<div id='javatbd<?php echo $myfname; ?>' class='col-xs-12 form-group answer-item radio-item btn' <?php echo $sDisplayStyle; ?> >
<div class="container-fluid">
<input
class="btn btn-primary btn-block"
type="button"
value="<?php echo $code; ?>"
name="<?php echo $name; ?>"
id="answer<?php echo $name.$code; ?>"
<?php echo $checkedState;?>
onclick="if (document.getElementById('answer<?php echo $name; ?>othertext') != null) document.getElementById('answer<?php echo $name; ?>othertext').value='';checkconditions(this.value, this.name, this.type)"
aria-labelledby="label-answer<?php echo $name.$code; ?>"
/>
</div>
</div>
You can use the Bootstrap buttons radio component to make a radio button look like normal button.
<div class="btn-group" data-toggle="buttons">
<label class="btn btn-primary">
<input type="radio" name="options" id="option1"> Option 1
</label>
<label class="btn btn-primary">
<input type="radio" name="options" id="option2"> Option 2
</label>
<label class="btn btn-primary">
<input type="radio" name="options" id="option3"> Option 3
</label>
</div>
You can see the live example, and other options here - http://www.tutorialrepublic.com/twitter-bootstrap-tutorial/bootstrap-stateful-buttons.php
This worked. Thanks! Now I'll try to remove the O in the middle of the button and remove the Submit button, so clicking on Boss will submit the value.
<div class="btn btn-primary btn-block">
<input
class="radio"
type="radio"
value="<?php echo $code; ?>"
name="<?php echo $name; ?>"
id="answer<?php echo $name.$code; ?>"
<?php echo $checkedState;?>
onclick="if (document.getElementById('answer<?php echo $name; ?>othertext') != null) document.getElementById('answer<?php echo $name; ?>othertext').value='';checkconditions(this.value, this.name, this.type)"
aria-labelledby="label-answer<?php echo $name.$code; ?>"
/>
<label for="answer<?php echo $name.$code; ?>" class="control-label radio-label"></label>
Image of radio / buttons
This worked! Thanks very much! Now I will try to remove the Submit button and make the clicked values submit the value. I'm trying to reduce space on the page.
Bootstrap Radio / buttons. It worked
<div class="btn-block" data-toggle="buttons">
<label class="btn btn-primary btn-block">
<input
class="radio"
type="radio"
value="<?php echo $code; ?>"
name="<?php echo $name; ?>"
id="answer<?php echo $name.$code; ?>"
<?php echo $checkedState;?>
onclick="if (document.getElementById('answer<?php echo $name; ?>othertext') != null) document.getElementById('answer<?php echo $name; ?>othertext').value='';checkconditions(this.value, this.name, this.type)"
aria-labelledby="label-answer<?php echo $name.$code; ?>"
/>
<label for="answer<?php echo $name.$code; ?>" class="control-label radio-label"></label>
<div class="label-text label-clickable" id="label-answer<?php echo $name.$code; ?>">
<?php echo $answer; ?>
</div>
</div>
I have radio buttons with name as 2d array in a while loop.I want to show the number of radio buttons checked when its clicked.
my radio buttons
$n=0;
while($row= mysqli_fetch_row($rs)){?>
<form name="myfm" id="myfm" method="post" action="Quizn.php">
<table width=100%> <tr> <td width=30><td></td></td></tr> <table border=0>
<?php $n=$n+1; ?>
<tr><td>Question <?php echo $n.") "; echo $row[2]; ?></td></tr>
<tr><td class=style8>A. <input type="radio" name="ques['<?php echo $n; ?>'][]" value=1><?php echo $row[3]; ?></td></tr>
<tr><td class=style8>B. <input type="radio" name="ques['<?php echo $n; ?>'][]" value=2><?php echo $row[4];?></td></tr>
<tr><td class=style8>C. <input type="radio" name="ques['<?php echo $n; ?>'][]" value=3><?php echo $row[5];?></td></tr>
<tr><td class=style8>D. <input type="radio" name="ques['<?php echo $n; ?>'][]" value=4><?php echo $row[6];?></td></tr>
<input type="hidden" name="ques['<?php echo $n; ?>'][]" value="0" />
<input type="hidden" value="<?php echo $row[0]; ?>" name="qid[]" />
<?php }
echo "<tr><td><input type=submit name=submit id='result' value='Get Result'></form>";
?>
</table></table>
</form>
<p>Clicked:</p> <p id="clicked">0</p>
javascript
$("input:radio").click(function () {
var totalRd = $('table').find(':not(.pend) > input:radio:checked').length;
$("#totalRd .rd-count").html(totalRd);
});
Please help me if you know the solution.
Thankyou
With some assumption, try like this
<?php
if(isset($_POST['submit'])){
echo "<pre>";
print_r($_POST);
echo "</pre>";
}
?>
<form method="post" action="">
<?php for ($i=0; $i < 3 ; $i++) { ?>
<br>
A<input type="radio" name="ques[<?php echo $i;?>][]" value=1>
B<input type="radio" name="ques[<?php echo $i;?>][]" value=2>
C<input type="radio" name="ques[<?php echo $i;?>][]" value=3>
D<input type="radio" name="ques[<?php echo $i;?>][]" value=4>
<?php } ?>
<br>
<input type="submit" name="submit" value="submit">
</form>
http://screencast.com/t/HEVSPR7yVR
http://screencast.com/t/rQSpXiJAMg
I suggest don't use array here name="ques[<?php echo $i;?>][]" just use name="ques[<?php echo $i;?>]" for clean and clear
Try this
$(":radio").on( 'click', function() {
count = $(':radio:checked').length;
alert(count);
});
I am weighting a code where user will select their answer for questions they are asked.
There would be multiple questions per page. And I want all those questions to be answered.
Below is the code of the questions form where questions are being called dynamically from database in a loop.
<form id="radio-demo" class="radio-demo" action="<?php echo get_site_url(); ?>/register-response" method="POST">
<?php
/* print_r($categories); */
/*loop to get questions for each categories*/
foreach($cat as $categories){
$software = $wpdb->get_results("SELECT * FROM ". $wpdb->prefix ."statement where statement_category_id =".$categories->statement_category_id);
$j++;
$table = $software;
$c_id = $categories->statement_category_id;
$i = 0;
?>
<div class="custom_hide" id="page_<?php echo $j;?>">
<?php
$cat_name = $categories->statement_category;
/*loop for the number of questions per category */
foreach($table as $software) {
$i++;
?>
<div class="question_one">
<p><?php echo $i.". ".$software->statement;?></p>
<label class="radio-inline">
<input type="radio" name="<?php echo $c_id.'_'.$i;?>" id="first-choice-<?php echo $i;?>" value="<?php echo 1*$software->weight;?>" required = "required"/>
<label for="first-choice">1</label>
</label>
<label class="radio-inline">
<input type="radio" name="<?php echo $c_id.'_'.$i;?>" id="second-choice-<?php echo $i;?>" value="<?php echo 2*$software->weight;?>" required = "required"/>
<label for="second-choice">2</label>
</label>
<label class="radio-inline">
<input type="radio" name="<?php echo $c_id.'_'.$i;?>" id="third-choice-<?php echo $i;?>" value="<?php echo 3*$software->weight;?>" required = "required"/>
<label for="third-choice">3</label>
</label>
<label class="radio-inline">
<input type="radio" name="<?php echo $c_id.'_'.$i;?>" id="four-choice-<?php echo $i;?>" value="<?php echo 4*$software->weight;?>" required = "required"/>
<label for="four-choice">4</label>
</label>
<label class="radio-inline">
<input type="radio" name="<?php echo $c_id.'_'.$i;?>" id="five-choice-<?php echo $i;?>" value="<?php echo 5*$software->weight;?>" required = "required"/>
<label for="five-choice">5</label>
</label>
<label class="radio-inline">
<input type="radio" name="<?php echo $c_id.'_'.$i;?>" id="six-choice-<?php echo $i;?>" value="<?php echo 6*$software->weight;?>" required = "required"/>
<label for="six-choice">6</label>
</label>
<label class="radio-inline">
<input type="radio" name="<?php echo $c_id.'_'.$i;?>" id="seven-choice-<?php echo $i;?>" value="<?php echo 7*$software->weight;?>" required = "required"/>
<label for="seven-choice">7</label>
</label>
<label class="radio-inline">
<input type="radio" name="<?php echo $c_id.'_'.$i;?>" id="eight-choice-<?php echo $i;?>" value="<?php echo 8*$software->weight;?>" required = "required"/>
<label for="eight-choice">8</label>
</label>
<label class="radio-inline">
<input type="radio" name="<?php echo $c_id.'_'.$i;?>" id="nine-choice-<?php echo $i;?>" value="<?php echo 9*$software->weight;?>" required = "required"/>
<label for="nine-choice">9</label>
</label>
<label class="radio-inline">
<input type="radio" name="<?php echo $c_id.'_'.$i;?>" id="ten-choice-<?php echo $i;?>" value="<?php echo 10*$software->weight;?>" required = "required"/>
<label for="ten-choice">10</label>
</label>
<label class="radio-inline">
<input type="radio" name="<?php echo $c_id.'_'.$i;?>" id="eleven-choice-<?php echo $i;?>" value="<?php echo 0*$software->weight;?>" required = "required"/>
<label for="eleven-choice">No Opinion</label>
</label>
<!-- <input type="hidden" name="currentID" value="<?php echo $c_id; ?>" />-->
</div> <?php }?>
<div class="bottum_btn">
<div class="">
<?php if($j > 1){?>
<div class="back_btn">
<a onclick="custom_back(<?php echo $j-1;?>)"><i class="fa fa-chevron-circle-left">Back</i> </a>
</div>
<?php
}
if($j == $catcount){?>
<div class="next_btn">
<input name="submit" type="submit" id="submit_btn" value="submit""><i class="fa fa-chevron-circle-right"></i></input>
</div>
<!--<a name="submit" id="submit_btn" onClick="PopUp()">submit<i class="fa fa-chevron-circle-right"></i>
</a>-->
<?php } else
{
?>
<div class="next_btn">
<a onclick="custom_next(<?php echo $j+1;?>)">Next<i class="fa fa-chevron-circle-right"></i> </a>
</div><?php
}?>
</div>
</div>
</div>
<?php }?>
The script I am trying is as below.
function custom_next(val) {
var val1 = "#page_" + val;
var val2 = "#page_" + (val - 1);
var questions = jQuery(".question_one");
var maindiv = jQuery(val2);
if (jQuery(val2+':not(:has(:radio:checked))').length > 1) {
console.log(jQuery(val2+':not(:has(:radio:checked))').length);
alert("At least one group is blank");
}else{
console.log(jQuery(val2+':not(:has(:radio:checked))').length);
jQuery(val1).removeClass("custom_hide");
jQuery(val1).addClass("custom_show");
jQuery(val2).removeClass("custom_show");
jQuery(val2).addClass("custom_hide");
}}
But this script is checking for "if any of the radio button group is checked or not" where I want all of the radio button groups to be checked.
I have analyzed your code and I have developed this code for your script. This scripts checks if any of your question options is checked or not.
function custom_next(val) {
var val1 = "#page_" + val;
var val2 = "#page_" + (val - 1);
var i = 0;
var j = 0;
jQuery('div.custom_show input[type=radio]').each(function(){
var status = jQuery(this).is(':checked');
//alert(status);
i=i+1;
if(status == true){
j=j+1;
}
});
i= i/11;
if(i == j){
jQuery(val1).removeClass("custom_hide");
jQuery(val1).addClass("custom_show");
jQuery(val2).removeClass("custom_show");
jQuery(val2).addClass("custom_hide");
}else{
alert("All Questions are mandetory!!");
}
}
First find all the radio button groups inside your form
var radio_groups = [];
$("#radio-demo :radio").each(function(){
radio_groups.push(this.name);
});
Now iterate through all of them to see if any one is not selected
var isAnyUnselected = radio_groups.filter( function(vallue){
return $(":radio[name='"+group+"']:checked").length == 0
} ).length > 0;
check if isAnyUnselected is true (some are unselected) or false (all of them are selected)
But this script is checking for "if any of the radio button group is checked or not" where I want all of the radio button groups to be checked.
What you need to do is check if there is at least one radio box that is not checked. Small example:
<input class="ans" type="radio"/>
<input class="ans" type="radio"/>
if ($('.ans').not(':checked').length)
{
console.log('At least one not checked, please check all');
}
else
{
console.log('All checked');
}
If you don´t want to change the html you can use the selector jQuery("input[type='radio']:not(:checked)") if the .length of this selector is greater than 1 there are some input to check. Simple example here se the console logs.
Otherwise you could use the required attribute link1 link2.
Trying to use label for each radio-box(to customise them with css3), but there is javascript preventing the labels to work as they should. When I click on a label, the radio-box gets focused but not checked.
If you click straight on the radio-box, it validates and adds a class .validation-passed to the input. Maybe I need to make a validation for the label aswell?
Anyone faced this before and could help out to make it work?
<table class="data-table review-summary-table" id="product-review-table">
<tbody>
<?php foreach ($this->getRatings() as $_rating): ?>
<tr>
<td class="label">
<?php echo $this->escapeHtml($_rating->getRatingCode()) ?>
</td>
<?php foreach ($_rating->getOptions() as $_option): ?>
<td class="value">
<label for="<?php echo $this->escapeHtml($_rating->getRatingCode()) ?>_<?php echo $_option->getValue() ?>">
<?php echo $this->escapeHtml($_rating->getRatingCode()) ?> <?php echo $_option->getValue() ?>
</label>
<input type="radio" name="ratings[<?php echo $_rating->getId() ?>]" id="<?php echo $this->escapeHtml($_rating->getRatingCode()) ?>_<?php echo $_option->getValue() ?>" value="<?php echo $_option->getId() ?>" class="radio" />
</td>
<?php endforeach; ?>
</tr>
<?php endforeach; ?>
</tbody>
</table>
<input type="hidden" name="validate_rating" class="validate-rating" value="" />
<script type="text/javascript">decorateTable('product-review-table')</script>
I see that all of radio boxes have different names.
If you want collate it to 1 group you should use same names for all radio buttons.
name="ratings"