...

View Full Version : How do I keep a simple tally with js?



quiethorn
12-15-2010, 01:35 AM
I have very limited understanding of programming, but I want to do something with javascript in the browser and don't know how to go about it. I know it could be done in C or some other language, but I have even less experience with that, so I want to see if I can do it in the browser.

I have a questionnaire that the respondents filled out by hand, and I have to tally the results. Rather than go through and tally up the results for each question by hand on paper, I'd rather just be able to punch the values for the answers (the questions are "worst to best; 1-5" type responses) on the 10-key, have it add 1 to the appropriate box for each question, move to the next question, wait for my next entry of 1-5, and start back at the beginning again when I'm finished inputting answers for all the questions.

I have an idea that there'd be 5 boxes per question for the tallied results and a box alongside each of those for entry of the answer. If you input "1" in that box, it'd add 1 to the first box; if you hit "2," it'd add 1 to the second box; if you hit "3," it'd add 1 to the third box, etc. I know this probably requires onKeyDown or onKeyUp to get the value of the answer, but I'm not sure how to get values captured from onKeyDown/Up through the javascript and back into the appropriate boxes. I'm not sure if I need an if...then conditional in the javascript or if it can be done some other way.

Anyway, can anyone post some simple, sample code so I can get this going for at least one question and then I can scale it up from there?

Thank you!

jmrker
12-15-2010, 02:19 AM
Two possibilities, assuming I'm understanding your request:


<html>
<head>
<title>Questionaire Summary</title>
<script type="text/javascript">
// From: http://www.codingforums.com/showthread.php?t=212180

function getRBtnName(GrpName) {
var sel = document.getElementsByName(GrpName);
var fnd = -1;
var str = '';
for (var i=0; i<sel.length; i++) {
if (sel[i].checked == true) { str = sel[i].value; fnd = i; }
}
// return fnd; // return option index of selection
// comment out next line if option index used in line above
return str;
}


function sum1() {
var total = 0;
for (var i=1; i<=5; i++) {
total += Number(document.getElementById('qm'+i).value);
}
return total;
}

function sum2() {
var tid = '';
var total = 0;
for (var i=1; i<=5; i++) {
tid = 'q'+i;
total += Number(getRBtnName(tid));
}
return total;
}

</script>
</head>
<body>
<h1>Method 1</h1>
Rate the question from worst (1) to best (5):<p>
Question 1: <input id="qm1" type="text" value="" size="2"><p>
Question 2: <input id="qm2" type="text" value="" size="2"><p>
Question 3: <input id="qm3" type="text" value="" size="2"><p>
Question 4: <input id="qm4" type="text" value="" size="2"><p>
Question 5: <input id="qm5" type="text" value="" size="2"><p>
<button onclick="alert(sum1())">Sum Method 1</button>

<hr>
<h1>Method 2</h1>
Rate the question from worst (1) to best (5):<p>
Question 1: <br> Worst
<input type="radio" name="q1" value="1">
<input type="radio" name="q1" value="2">
<input type="radio" name="q1" value="3">
<input type="radio" name="q1" value="4">
<input type="radio" name="q1" value="5"> Best
<p>
Question 2: <br> Worst
<input type="radio" name="q2" value="1">
<input type="radio" name="q2" value="2">
<input type="radio" name="q2" value="3">
<input type="radio" name="q2" value="4">
<input type="radio" name="q2" value="5"> Best
<p>
Question 3: <br> Worst
<input type="radio" name="q3" value="1">
<input type="radio" name="q3" value="2">
<input type="radio" name="q3" value="3">
<input type="radio" name="q3" value="4">
<input type="radio" name="q3" value="5"> Best
<p>
Question 4: <br> Worst
<input type="radio" name="q4" value="1">
<input type="radio" name="q4" value="2">
<input type="radio" name="q4" value="3">
<input type="radio" name="q4" value="4">
<input type="radio" name="q4" value="5"> Best
<p>
Question 5: <br> Worst
<input type="radio" name="q5" value="1">
<input type="radio" name="q5" value="2">
<input type="radio" name="q5" value="3">
<input type="radio" name="q5" value="4">
<input type="radio" name="q5" value="5"> Best
<p>
<button onclick="alert(sum2())">Sum Method 2</button>

</body>
</html>

Good Luck!
:)

Old Pedant
12-15-2010, 02:19 AM
<html>
<head>
<script type="text/javascript">
function bump(rb)
{
var total = rb.form["total" + rb.name];
total.value = parseInt(total.value) + parseInt(rb.value);
rb.checked = false;
}
</script>
</head>
<body>
<form>
Rate the movie "Toy Story":<br/>
<label><input name="rb1" type="radio" value="1" onclick="bump(this);"/> 1 </label>
<label><input name="rb1" type="radio" value="2" onclick="bump(this);"/> 2 </label>
<label><input name="rb1" type="radio" value="3" onclick="bump(this);"/> 3 </label>
<label><input name="rb1" type="radio" value="4" onclick="bump(this);"/> 4 </label>
<label><input name="rb1" type="radio" value="5" onclick="bump(this);"/> 5 </label>
<label> Total: <input type="text" readonly name="totalrb1" value="0" />
<hr>
Rate this answer:<br/>
<label><input name="rb2" type="radio" value="1" onclick="bump(this);"/> 1 </label>
<label><input name="rb2" type="radio" value="2" onclick="bump(this);"/> 2 </label>
<label><input name="rb2" type="radio" value="3" onclick="bump(this);"/> 3 </label>
<label><input name="rb2" type="radio" value="4" onclick="bump(this);"/> 4 </label>
<label><input name="rb2" type="radio" value="5" onclick="bump(this);"/> 5 </label>
<label> Total: <input type="text" readonly name="totalrb2" value="0" />
<hr>
</form>
</body>
</html>

???? Not sure this is what you want, but...

I'm having it clear the checked buttons as soon as it adds their value to the total. If you'd prefer to (a) only clear the buttons after passing all the way down the page and/or (b) only add the button values after passing all the way down the page [gives you a chance to correct errors!] and then clicking on an "Okay" button, those are both easy changes to make.

Old Pedant
12-15-2010, 02:21 AM
Sheesh, beaten by *SECONDS*!!!! And by a little yellow bird, at that. <grin/>

jmrker
12-15-2010, 02:22 AM
Sheesh, beaten by *SECONDS*!!!! And by a little yellow bird, at that. <grin/>

Finally!!!!!! :D:D:D:D:D

Old Pedant
12-15-2010, 02:39 AM
Hey, it's okay, you win points for the banjo, in any case.

quiethorn
12-15-2010, 04:52 AM
Thanks for the help! Unfortunately, it's not what I was asking for. Try out the code below to get a better idea. It uses buttons to tally up results in the boxes on the left. This is example would be for the results for two questions (I'd scale it up).

For each question, you click on the button corresponding to the score that person gave for that question. After you tally everything up, you can see, for example, 8 people answered "1" on question one, 4 people answered "2" on question one, 8 people answered "3" on question one, etc., all the say down the line for each question.

What I want is a way to tally up the values in the same way without having to click on the buttons for the corresponding answer. I'd prefer just to enter the value for each question by hitting 1, 2, 3, 4 or 5 on the keyboard for the appropriate answer, but I'm not sure how to do this. That's why I thought I'd need onKeyUp or something to do it. Pushing buttons I get, but using javascript to get the keystrokes and change the variable for the relevant box based on what key was hit is something I don't know how to do.



<html>
<head>
<script language="javascript">
function addone(field) {
field.value = Number(field.value) + 1;
}

</script>

</head>

<body>
<form name="myform" class="section">

<input value="1" onclick="addone(question1a);" type="button" >
<input value="2" onclick="addone(question1b);" type="button" >
<input value="3" onclick="addone(question1c);" type="button" >
<input value="4" onclick="addone(question1d);" type="button" >
<input value="5" onclick="addone(question1e);" type="button" >

<input name="question1a" value="0" size="1" type="text" class="box">
<input name="question1b" value="0" size="1" type="text" class="box">
<input name="question1c" value="0" size="1" type="text" class="box">
<input name="question1d" value="0" size="1" type="text" class="box">
<input name="question1e" value="0" size="1" type="text" class="box"><br>

<input value="1" onclick="addone(question2a);" type="button" >
<input value="2" onclick="addone(question2b);" type="button" >
<input value="3" onclick="addone(question2c);" type="button" >
<input value="4" onclick="addone(question2d);" type="button" >
<input value="5" onclick="addone(question2e);" type="button" >

<input name="question2a" value="0" size="1" type="text" class="box">
<input name="question2b" value="0" size="1" type="text" class="box">
<input name="question2c" value="0" size="1" type="text" class="box">
<input name="question2d" value="0" size="1" type="text" class="box">
<input name="question2e" value="0" size="1" type="text" class="box">

</body></html>

Old Pedant
12-15-2010, 07:34 AM
Well, it's interesting that both of us read your question the same way, so I don't think you can blame the readers in this case, too much.

Anyway, yes, you can do that. onkeypress is probably the easiest option.

I think what I would do is simpy have onkeypress active for each line/<input> and have it simply automatically move the cursor to the next field. And then I'd only change the tallies when you hit the bottom and pressed a button or hit the return key.

That way, if you did hit the wrong key you'd (a) have a visual indication of it and (b) have a chance to use the mouse to re-focus on the cell in error and hit another key to correct the error.

Does that sound reasonable?

quiethorn
12-15-2010, 09:20 AM
Yeah, that'd definitely be the way to do it. I just don't know how to implement it so it knows which key I've pressed and hence which box to +1. With the buttons like how it was, the script knows which button I've pressed, so the information is conveyed that way, but I don't know how to turn the keys that I press into the equivalent information. It seems like it'd involve some more work turning key presses into ascii codes, then maybe putting those in if...then statements to +1 the relevant box, etc. That's where I'm stuck since I haven't been able to figure those things out on my own.

Old Pedant
12-15-2010, 07:42 PM
Getting keypress and then the key values isn't hard, esp. when you want to limit it to just digits. What's a bit harder is making it work cross-browser. So to save me effort, will you be just doing this in one particular browser? If so, which one? (The dividing line is MSIE8 and below and then everything else.)

quiethorn
12-15-2010, 08:02 PM
I'd just be using Google Chrome.

Thanks in advance for the help. I've been trying to figure this out for a few weeks.

Old Pedant
12-15-2010, 08:20 PM
Back in a couple of hours. Maybe sooner, but meetings interfere.

quiethorn
12-18-2010, 08:03 AM
Any more progress on this?

jmrker
12-21-2010, 04:33 PM
How close is this to what you want to do?


<html>
<head>
<script language="javascript">
// From: http://codingforums.com/showthread.php?p=1028148#post1028148

var maxQuestions = 5;
var QNO = 0;
var OldQNO = 0;

function numberOnly(e) {
var code;
if (!e) var e = window.event;
if (e.keyCode) code = e.keyCode;
else if (e.which) code = e.which;

var flag = true; var next = ''; var tmp = 0;
switch (code) {
case 8 : break; // backspace
case 9 : break; // tab and shift-tab
case 46: break; // delete
case 37: break; // left arrow
case 39: break; // right arrow
case 38: // up arrow
QNO--; if (QNO < 0) { QNO = 0; }
flag = false; break;
case 40: // down arrow
QNO++; if (QNO >= maxQuestions) { QNO = (maxQuestions-1); }
flag = false; break;
default: flag = false; break;
}
document.getElementById('TQ'+OldQNO).style.backgroundColor="white";
OldQNO = QNO;
document.getElementById('TQ'+QNO).style.backgroundColor="yellow";

var char = String.fromCharCode(code);
// alert('Code: '+code+' Char: '+char); // for testing purposes
// if ((code < 48) || (code > 57)) { return false; } // limit to 0...9
// if ((code < 48) || (code > 52)) { return false; } // limit to 0...4
// if ('0123456789-+.'.indexOf(char) >= 0) { flag = true; }
if ('01234'.indexOf(char) >= 0) { flag = true; }
else { document.getElementById('entry').value = ''; }
return flag;
}

function add_one(info) {
var IDS = 'q'+QNO;
var fld = Number(info);
if (document.getElementById(IDS+fld)) {
var sel = document.getElementById(IDS+fld); // alert('IDS = '+IDS+fld);
sel.value = Number(sel.value) + 1;
}
}

function sum() {
var total = 0;
var fld = '';
for (var i=0; i<5; i++) {
total = 0;
for (var q=0; q<maxQuestions; q++) {
fld = 'q'+q+i;
total += Number(document.getElementById(fld).value);
}
fld = 'sum'+i;
document.getElementById(fld).value = total;
currentQuestion = 0;
}
}
</script>
</head>
<body onload="document.getElementById('TQ0').style.backgroundColor='yellow';document.getElementById('entry').focus ()">
<form name="myform" class="section" onsubmit="return false">
<h1>Tally Sheet</h1>
<script type="text/javascript">
var str = '';
var tid = '';

/* using single input */
str = 'Entry for question (0-4,Up or Down): ';
str += '<input type="text" id="entry" value="" size="1" autocomplete="off"';
str += ' onkeyup="if(numberOnly(event)){add_one(this.value);';
str += 'document.getElementById(\'entry\').value=\'\';this.select()}">';
/* */

str += '<table border="1">';
str += '<tr style="font-size:1.5em"><td>Score</td><td>&nbsp;</td><td>0</td><td>1</td><td>2</td><td>3</td><td>4</td></tr>';
for (var q=0; q<maxQuestions; q++) {
tid = 'q'+q;
str += '<tr><td id="TQ'+q+'">Question '+(q+1)+'</td><td></td>';
for (j=0; j<5; j++) {
str += '<td>';
str += ' <input id="'+tid+j+'" value="0" size="1" type="text" class="box" readonly>';
str += '</td>';
}
str += '</tr>'; // alert(str);
}

str += '<tr><th><button onclick="sum()">Item Totals</button></th>';
str += '<td>&nbsp;</td>';
str += '<td> <input name="sum0" id="sum0" value="0" size="1" type="text" class="box"> </td>';
str += '<td> <input name="sum1" id="sum1" value="0" size="1" type="text" class="box"> </td>';
str += '<td> <input name="sum2" id="sum2" value="0" size="1" type="text" class="box"> </td>';
str += '<td> <input name="sum3" id="sum3" value="0" size="1" type="text" class="box"> </td>';
str += '<td> <input name="sum4" id="sum4" value="0" size="1" type="text" class="box"> </td>';
str += '</tr>';

str += '</table>';
document.write(str);
</script>
</body>
</html>

quiethorn
12-31-2010, 08:34 AM
Sorry I didn't get back sooner. Christmas and relatives and all that... The code looks great! Exactly what I was hoping for. I'll look it over and see if I can figure out what's going on so I can scale it up for more questions. Thank you so much!

jmrker
12-31-2010, 03:45 PM
You're most welcome.
Happy Holidays.
Good Luck!
:)



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum