I am making a quiz. It has two questions with four answers each.
I want to hide the submit button until user answers all question.
My code:
var answered = 0;
function checkAllAns(){
++answered;
if (answered >= 10)
{
document.getElementById("stop-btn").style.display = "inline-block";
document.getElementById("stop-btn").style.opacity = "1";
}
}
It works only when user answers one time each question, but what if user makes a mistake? Say user answers the same question for 10 times, the submit button appear although all question haven't been answered yet.
I replace it with this:
function checkAllAns(index){
var checkedIndex = [];
if ( ansAll[index] == false){
ansAll[index] = true;
}
for (i = 0; i < ansAll.length; ++i) {
if (ansAll[i] == true){
var checked = 0;
for (j = 0; j < checkedIndex.length; ++j){
if ( checkedIndex[j] == ansAll[i] ){
checked = 1;
}
else{
checkedIndex.push( ansAll[i] );
}
}
if (checked == 0){
++answered;
}
}
}
if (answered >= 10){
document.getElementById("stop-btn").style.display = "inline-block";
document.getElementById("stop-btn").style.opacity = "1";
}
}
It does not work (if it is working I won't answer it here...)
What is wrong with my code? If you've find another way to accomplish this, you can suggest me.
Thanks,
My complete code is here: http://codepen.io/anon/pen/EjYWWx
It seems like you have the right idea, but you're working too hard, you can just use one array and iterate through that (unless you're worried about a timing attack) like so:
function checkAllAns(index)
{
ansAll[index] = true;
for (i = 0; i < ansAll.length; ++i)
{
if (ansAll[i] != true)
{
break;
}
if (i == ansAll.length-1)
{
document.getElementById("stop-btn").style.display = "inline-block";
document.getElementById("stop-btn").style.opacity = "1";
}
}
}
Here's a JSFiddle for you: http://jsfiddle.net/soyn0xag/6/
Instead of using complex nesting of iterations and loops, use JQuery.
This checks whether the key has left the text area (aka complete)
$("input[type='text'], textarea").on("keyup", function(){
if($(this).val() != "" && $("textarea").val() != "" && $("input[name='category']").is(":checked") == true){
$("input[type='submit']").removeAttr("disabled");
}
});
This check whether the check box has been selected or changed.
$("input[name='category']").on("change", function(){
if($(this).val() != "" && $("textarea").val() != "" && $("input[name='category']").is(":checked") == true){
$("input[type='submit']").removeAttr("disabled");
}
});
This checks if the element is checked, when everything is check change the submit to show. This is just a snippet, you will need to expand.
Here is a method. Keep an array answered and add the question index to it unless that question has already been answered. Whene the array length is 10 then all questions have been answered
var answered = [];
function checkAllAns (index) {
if (answered.indexOf (index) >= 0)
answered.push (index);
if (answered.length == 10)
{
document.getElementById("stop-btn").style.display = "inline-block";
document.getElementById("stop-btn").style.opacity = "1";
}
}
I would suggest trying to go for simpler code and try to integrate it in a single solution. Something like this (untested):
function answered(){
return document.querySelectAll('.question.answered').length;
}
var answers = document.querySelectAll('.question .answer');
for (var i = 0; i < answers.length; i++) {
answers[i].onclick = function(e){
// This should be the question
e.target.parentNode.classList.add('answered');
// Check how many questions are answered
if (answered() > 10) {
// DO SOMETHING
}
}
}
Not tested, but in this way it's much easier. If you also used jQuery or a similar library, it would be much much more easy (as Bradley Wilson's answer point out).
Related
I have the following function: http://jsfiddle.net/xznzyxyg/2/
Basically what it does it checks of the value of an input is equal to another value of another input in the same div.
Instead of the filtering I want it in an If function.
So that if true{ colour red}
The function I have now;
var inputs = $('#lol input');
var hoofdinput = document.getElementById('ad');
function Getred(i,el){
return inputs.not(this).filter(function() {
return hoofdinput.value === el.value;
}).length !== 0;
}).addClass('red');
What I want it in:
If (true){
// Colour red
}
else {
Alert('No duplicates');
}
Can somebody help me with this, I'm really frustrated with this one...
Thanks!!
EDIT: This is the solution, duplicates are coloured with red and others wich are not duplicate with green: http://jsfiddle.net/xznzyxyg/4/
is something like this what you are looking for?
var inputs = $('#lol input');
var hoofdinput = document.getElementById('ad');
for( var counter = 0; counter < inputs.length; counter++) {
if ( hoofdinput.value === inputs[counter].value )
inputs[counter].className += 'red';
else
alert('No duplicates');
}
var $inputs = $('div.myDiv input')
$inputs.each(function(i1, input1){
$inputs.slice(i1 + 1).each(function(i2, input2) {
if (input1.value == input2.value) $(input2).addClass('red');
});
});
Then if you need to alert that there were no matches
if ($('div.myDiv input.red').length == 0) alert('No duplicates');
Is there a way to use the qualtrics javascript api (or, if not, a workaround) to programatically clear all entries made to radio buttons on a page?
My usage case is in a matrix table question that "pipes" (actually uses embedded data) values from the previous question to puts calculated numbers into the statements. However, if the respondent navigates back then when the return to the following question the numbers have changed but the responses have remained. As such, if it is the second time a respondent is viewing a page constructed like this, I want to clear all their previous answers.
I want to make sure that qualtrics' data is updated properly.
My survey is currently using the JFE engine if that makes a difference.
Qualtrics.SurveyEngine.addOnload(function() {
var QID = this.questionId;
var that = this;
var counts = [];
var radioButtonsClean = [];
var radioButtons = $(QID).getElementsByTagName('input');
var radioIndex = [];
for(var i=0; i<radioButtons.length; i++) {
if(radioButtons[i].type == 'radio') {
radioButtonsClean.push(radioButtons[i]);
radioIndex.push(radioButtons[i].id);
}
}
// Set counts for each displayed radio button to 0
for(var i=0; i<radioButtonsClean.length; i++) {
counts[i] = 0;
}
this.questionclick = function(event,element){
if (element.type == 'radio') {
var thisId = element.id;
var spotCheck = radioIndex.indexOf(thisId);
var count = counts[spotCheck];
if (count == 0) {
for(var i=0; i<counts.length; i++) {
counts[i] = 0;
}
counts[spotCheck] = 1;
}
else {
this.setChoiceValue(element.id.split('~')[2], element.id.split('~')[3], false);
counts[spotCheck] = 0;
}
}
}
});
So, I'm trying to create a quiz in Javascript, by using number ids of the text inputs in HTML, then running a for loop and if to compare the input to the answer in an answers array.
In Html:
<form>
China<input type="text" id="0"><br>
France<input type="text" id="1"><br>
Japan<input type="text" id="2"><br>
<input type="button" id="submitt" value="submit">
</form>
In Javascript:
var answers = ["Beijing", "Paris", "Tokyo",];
$("#submitt").click(function() {
var totalYes=0;
function checkAnswers() {
for(var i=0; i<answers.length; i++) {
var userAnswer = document.getElementById(i);
if(userAnswer.value===answers[i]) {
totalYes++;
}
}
}
alert(totalYes);
checkAnswers();
});
But the code doesn't add 1 to the variable totalYes (questions correct). I've tried totalYes+=1 and totalYes + 1 as well. The alert of totalYes shows up as 0 everytime.
But I know that's the only part not working because when I change totalYes to correct and incorrect alerts, it works:
var answers = ["Beijing", "Paris", "Tokyo",];
$("#submitt").click(function() {
var totalYes=0;
function checkAnswers() {
for(var i=0; i<answers.length; i++) {
var userAnswer = document.getElementById(i);
if(userAnswer.value===answers[i]) {
alert("Correct!");
} else {
alert("Incorrect!");
}
}
}
alert(totalYes);
checkAnswers();
});
Please help?
jsFiddle Demo
NOTE: Because totalYes is a global variable you'll want to reset it to 0 after you show how many the user got right
JS
var answers = ["Beijing", "Paris", "Tokyo", ];
var totalYes = 0;
$("#submitt").click(function (e) {
checkAnswers();
alert(totalYes);
e.preventDefault();
});
function checkAnswers() {
for (var i = 0; i < answers.length; i++) {
var userAnswer = document.getElementById(i);
if (userAnswer.value === answers[i]) {
totalYes++;
}
}
}
Side Note: This would be the easy test to cheat on...simply view source and you can see the JavaScript answers. Perhaps you should toLower() the text and then md5 or sha1 the answers. Then simply do the same when checking them
jsFiddle Demo
var answers = ["feecd450f4886bbed257e222fcf7609cbdd57a64", "3c4bd4d0d0d1e076ce617723edd6a73afc9126ab", "0f1aae8b8398c20f81e1c36e349a7880c9234c63", ];
var totalYes = 0;
$("#submitt").click(function (e) {
checkAnswers();
alert(totalYes);
e.preventDefault();
totalYes = 0;
});
function checkAnswers() {
for (var i = 0; i < answers.length; i++) {
var userAnswer = document.getElementById(i);
if (Sha1.hash(userAnswer.value.toLowerCase()) === answers[i]) {
totalYes++;
}
}
}
Note: You will see some sha1 code this code was taken from http://www.movable-type.co.uk/scripts/sha1.html#code
This will make it impossible without a rainbow table to simply view source to get the answer, I hope this is helpful in some small way
Extra note: Because you are using a for loop for each question, any answer can be put into any textbox. Example: Paris can be put in the textbox next to China and you'll still get 1 right.
The order of calling functions is not correct. You are first alerting your variable and then start counting correct answers. Change to:
$("#submitt").click(function() {
var totalYes=0;
function checkAnswers() {
for(var i=0; i<answers.length; i++) {
var userAnswer = document.getElementById(i);
if(userAnswer.value===answers[i]) {
totalYes++;
}
}
}
checkAnswers(); // check answers at the first place
alert(totalYes);
});
I'm just developing my skills and trying to create a js app to do the "Lights Out game" type of script that you might have seen before. Nothing complicated. Or so I thought. The idea is you start out with a grid of darkened lights, and if you click one button it toggles the state of the clicked button as well as those to the NSEW of that button. Once you click the correct sequence, all the lights are lit. My problem is basically that the divs I created are not registering a click event.
function lightUp(){
$("div.light").click(function(){
var thisDiv = $(this).attr("id");
var topDiv = null;
var bottomDiv = null;
var leftDiv = null;
var rightDiv = null;
for (i= 1; 4; i++){
for (j=1; 4; j++){
var testDiv = "r"+i+"c"+j;
if (testDiv === thisDiv) {
if (i > 1) {
topDiv = "r"+(i-1)+"c"+j;
}
if (i < 4) {
bottomDiv = "r"+(i+1)+"c"+j;
}
if (j > 1) {
leftDiv = "r"+i+"c"+(j-1);
}
if (j < 4) {
rightDiv = "r"+i+"c"+(j+1);
}
}
}
}
$("#"+thisDiv, "#"+topDiv, "#"+bottomDiv, "#"+leftDiv, "#"+rightDiv).toggleClass("on").toggleClass("off");
});
}
is not registering the clicks on the divs.
<div id="r2c3" class="light off" onclick="lightUp();"></div>
It's possible this kind of script has to be much more complex, but I'm trying it out. Input is appreciated.
http://jsfiddle.net/4bUnt/3/
Ok, got it working for you. Check it out here:
http://jsfiddle.net/4bUnt/6/
Normally when giving an answer I would propose the solution and let the person re-work their code, however in this case their were quite a few syntax errors and various problems with the code, that to try to point them out one by one, step by step would have been quite cumbersome and the back and forth dialog in comments would have been too much. Maybe is why there is no other answers to this question so far.. anyway, check it out and learn from it and if you found this and a solution and/or helpful answer, please select this as the answer or up-vote it. thank you. Carry on. Good luck! :)
$( document ).ready(function() {
$("div.light").click(function(){
var thisDiv = $(this).attr("id");
var topDiv = null;
var bottomDiv = null;
var leftDiv = null;
var rightDiv = null;
for (var i= 1; i<5; i++){
for (var j=1; j<5; j++){
var testDiv = "r"+i+"c"+j;
if (testDiv === thisDiv) {
if (i > 1) {
topDiv = "r"+(i-1)+"c"+j;
}
if (i < 4) {
bottomDiv = "r"+(i+1)+"c"+j;
}
if (j > 1) {
leftDiv = "r"+i+"c"+(j-1);
}
if (j < 4) {
rightDiv = "r"+i+"c"+(j+1);
}
}
}
}
if ($("#"+thisDiv).hasClass("off")) {
$("#"+thisDiv).removeClass("off").addClass("on");
$("#"+topDiv).removeClass("off").addClass("on");
$("#"+bottomDiv).removeClass("off").addClass("on");
$("#"+leftDiv).removeClass("off").addClass("on");
$("#"+rightDiv).removeClass("off").addClass("on");
} else {
$("#"+thisDiv).removeClass("on").addClass("off");
$("#"+topDiv).removeClass("on").addClass("off");
$("#"+bottomDiv).removeClass("on").addClass("off");
$("#"+leftDiv).removeClass("on").addClass("off");
$("#"+rightDiv).removeClass("on").addClass("off");
}
});
});
Can we get the count of total radiobuttonlist items from .aspx page. I have to call a javascript function onclientclick of a button and i want to loop through the total number of radiobuttonlist items. So can anyone tell me that can we get it from .aspx page. Because in my scenario i can not use code behind for this.
function ClearRBL() {
for (i = 0; i < RBLCOUNT; i++) {
document.getElementById('rblWorkerList_' + [i]).checked = false;
}
}
How can i get RBLCOUNT here from .aspx page only? If not possible then in Javascript please.
I don't know how the aspx side would work, but if you want to do it just in JavaScript you could do something like the following that doesn't need to know the total number of elements in advance:
function ClearRBL() {
var i = 0,
rbl;
while (null != (rbl = document.getElementById('rblWorkerList_' + i++)))
rbl.checked = false;
}
The above assumes that the element ids end in numbers beginning with 0 counting up by 1s; the while loop will keep going until document.getElementById() doesn't find a matching element (in which case it returns null). A less cryptic way of writing it is as follows:
function ClearRBL() {
var i = 0,
rbl = document.getElementById('rblWorkerList_' + i);
while (null != rbl) {
rbl.checked = false;
i++;
rbl = document.getElementById('rblWorkerList_' + i);
}
}
P.S. When the while loop finishes i will be equal to the number of radio buttons, which may be useful if you want to do something with that number afterwards.
Try this:- This is not exactly what you want but hope it will help you.
function GetRBLSelectionID(RadioButtonListID) {
var RB1 = document.getElementById(RadioButtonListID);
var radio = RB1.getElementsByTagName("input");
var isChecked = false;
var retVal = "";
for (var i = 0; i < radio.length; i++) {
if (radio[i].checked) {
retVal = radio[i].id;
break;
}
}
return retVal;
}
you can give a name all radio button and then get them like this.
var RBLCOUNT= document[groupName].length;
or
var RBLCOUNT= 0;
var inputs = document.getElementsByTagName('input');
for (var i = 0; i < inputs.length; ++i) {
if(inputs[i].type =="radio"){
RBLCOUNT++;
}
}
I just created a javascript function as mentioned by Karthik Harve and found the total number of rows generated dynamically as below: -
function ClearRBL() {
var rblLen = document.getElementById('rblWorkerList');
for (i = 0; i < rblLen.rows.length; i++) {
document.getElementById('rblWorkerList_' + [i]).checked = false;
}
}
It's working on both Mozila and IE.
Thanks alot to all who tried to help.