0

im currently trying to style my javascript quiz by replacing the "submit answer" button with a image so instead of clicking the button to submit user can click the image. The button once clicked executes a function which checks the answer. Here is the original button code ive used, any ideas how to replace with image> "<button onclick='checkAnswer()'>Submit Answer</button>";

many thanks

sam121
  • 1
  • 1
  • 2
  • You can use CSS to style your button and add a background-image. Or have an tag with a click event handler. – chRyNaN Apr 27 '15 at 16:24
  • create a css class with the various modes of response (pending answer, right, wrong, etc... with appropriate class names). Once you have the classes set up your javacsript can check the answer and append or remove the appropriate classes to the image DOM element. – Silvertiger Apr 27 '15 at 16:26

2 Answers2

0

You can just add your img as an <img> tag, and an an onClick to that object:

img = document.createElement("img");
img.src = "https://www.google.com/images/srpr/logo11w.png";
img.onclick = function (){
  alert("clicked!");
  };
document.body.appendChild(img);
A.J. Uppal
  • 19,117
  • 6
  • 45
  • 76
0

Hi in your Html you can just place the image and in your script you can place the function that you want to execute.An example from your code.

<img id="myimagebutton" src="image.png" alt="Submit Answer" onclick="checkAnswer()" />

inside your javascript:

    function checkAnswer(){
        var mybutton = document.getElementById("myimagebutton");
        var answer = document.getElementById("answerbox").value or .innerHTML;

 // the element that contains the answer ex answerbox depending on the type
//execute somelogic
}

If you want some label under the image "button" search for this html5 future <figcaption>

Hawk
  • 13
  • 1
  • 7
  • Hi im a novice programmer and cannot get the code to work with your suggestion. `function checkAnswer(){ choices = document.getElementsByName("choices"); for(var i=0; iSubmit Answer";` where would the code fit in? – sam121 Apr 29 '15 at 14:24
  • Hi, I'll just point out some 'mistakes' in your code above..by using this `choices = document.getElementsByName("choices");` you just set the javascript variable choice to be the html element choices (which seems to be a checkbox). As I presume you just have multiple checkboxes you want to get their value..So please consider using var choise as an Array `var choice = []` Now to get all the checkboxes values you can use you for loop BUT use `if(document.getElementsByName("choices"+i+")".checked)` .. and be sure the checkboxes you want have `id="choices1"` ... `"choices2"`...`"choicesn"`! – Hawk Apr 29 '15 at 14:45
  • so would i need to these changes before i can replace the submit button with an image or could it work as it is? many thanks – sam121 Apr 29 '15 at 14:49
  • Moreover if choices are really checkboxes the don't contain any value..so what you may want to do is get the answer from a text field or a textarea (where I suppose the answer is..) so name all your text fields the same way ex `id="answer1" ..... "answern"` then replace `choise = choises[i].value' to `choices[i] = document.getElementsByName("answer"+i).value;` and then do some logic.. – Hawk Apr 29 '15 at 14:50
  • **Just an edit:** on my prelast comment the correct is `if(document.getElementsByName("choices"+i).checked)` and NO you can change it any time but you should make those changes if choices are checkboxes..please consider searching web for [link](http://www.w3schools.com/html/) at google it has a very nice explanation and the "try it" where you see it live :) – Hawk Apr 29 '15 at 14:54
  • If all these confuse you..`var choices = []` creates an empty array in javascript (js) by using `choices[i] = document.getElementsById("answer"+i).value;` you get all those textfields or textareas values inside the Array. In case the user has to check a checkbox (obviously here I mean answering is just a tick or not on the checkbox) then you have to use `choices[i] = document.getElementsById("checkboxname"+i).checked;` and the Array fills with true or false depending if the checkbox is ticked! Please explain better how is your HTML.. Btw Name attribute is to "group" some inputs vs id is unique – Hawk Apr 29 '15 at 15:10