javascript - How do i make a simple graph for each correct answer -
i have big test coming tomorrow, , i'm not quite sure how draw graph each time correct answer, nor can find/search solution. simply, want cavas add x height on column/pillar each time answer correct, in javascript.
if show me how it, while using code on site: http://www.javascriptsource.com/miscellaneous/basic-javascript-quiz.html amazing!
edit: column/piller this: (not sure).
var c=document.getelementbyid("mycanvas"); var ctx=c.getcontext("2d"); ctx.fillstyle="#ff0000"; ctx.fillrect(0,0,150,100); edit 2:
<script> var score = 0; var questions = [ ['how many moons earth have?', 1], ['how many moons saturn have?',31], ['how many moons venus have?', 0] ]; (var i=0; i<questions.length; i++) { askquestion(questions[i]); } function askquestion(question) { var answer = prompt(question[0],''); if (answer == question[1]) { alert('correct!'); score++; } else { alert('sorry. correct answer ' + question[1]); } } </script> </head> <body> <script> var message = 'you got ' + score; message += ' out of ' + questions.length; message += ' questions correct.'; document.write('<p>' + message + '</p>'); </script> <canvas id="mycanvas"> </canvas> </body> </html>
here's code started.
review code , apply link in question.
then start learning test!!
given array holding count of correct answers each question...
// array holds count of correct responses each answer var answers=[]; for(var i=0;i<answers.length;i++){ // how many correct answers question correctcount=answers[i]; // make each bar 20 pixels apart on x-axis answerx=i*20; // bars grow same bottom line on y-axis answery=150; // bars same width answerwidth=10; // each bar 10 pixels taller each correct answer answerheight=correctcount*10; // draw bar // negative answerheight cause bar draw // upward instead of usual downward ctx.fillrect(answerx,answery,answerwidth,-answerheight); }
Comments
Post a Comment