顯示對話單擊單選按鈕

我正在爲我的學校中的一些學生創建練習考試。我有很多選擇題，我試圖讓它工作在這裏陷入困境。我是新來的JavaScript，並沒有線索如何得到這個工作。所以，每一個問題有4個選擇，是這樣的：顯示對話單擊單選按鈕

<tr> 
    <td> 
     <figures1></figures1> 
    </td> 
    <td class="questiona"> 
     <br> 
     <input type="radio" name="q1" value="a"/>a<br> 
     <input type="radio" name="q1" value="b"/>b<br> 
     <input type="radio" name="q1" value="c"/>c<br> 
     <input type="radio" name="q1" value="d"/>d<br> 
    </td> 
</tr>

的問題是，只是一個形象，他們必須選擇A，B，C或d。我已經設法讓它工作到目前爲止，我想要添加的是一個對話框，只要他們點擊a，b，c或d來告訴他們答案是否正確，如果不添加反饋以告訴他們爲什麼答案是錯誤的。我不使用警報給他們反饋的原因是因爲我無法將圖像添加到警報框。

在此先感謝

來源

2014-09-10 rickert

'figures1'不是一個有效的HTML元素。 – 2014-09-10 12:28:01

shouldv'e把它放在代碼中，figure1引用一組數字。它只是將圖像加載到html頁面，圖形顯示了問題。 – rickert 2014-09-10 12:45:50

順便說一句，你的學生可以從源代碼中看到正確的答案 – 2014-09-10 12:59:50

給你的輸入一個類似「答案」。然後在您的jQuery代碼：

$(document).ready(function(){ 
     $(".answer").click(function(){ 
      ValidateAnswerFunction(this); //sends the input element to the validate answer function 
      $("#dialog").css("display", "block"); // shows the dialog .hide(); to hide it! 
     }); 

     $("#dialog").click(function(){ 
      $(this).hide(); 
     }); 
    }); 

    function ValidateAnswerFunction(input){ 
     switch($(input).val()){ 
      case "a": 
       $("#dialog").html("correct"); 
       break; 
      case "b": 
       $("#dialog").html("close"); 
       break; 
      case "c": 
       $("#dialog").html("not even close <img src='http://www.w3schools.com/html/pic_mountain.jpg' style='width:100px;height:100px'>"); 
       break; 
      case "d": 
       $("#dialog").html("are you even trying m8?"); 
       break; 
     } 
    }

哪裏#dialog是您的對話框：

<div id="dialog"></div>

JS fiddle

來源

2014-09-10 12:29:05

好吧，有了這些'＃dialog'和'.answer'，你應該添加一個完整的例子，它應該如何工作。 – Regent 2014-09-10 12:30:53

@Regent true讓我編輯。 – 2014-09-10 12:32:02

嗯它看起來不錯，萌芽的事情是我想在問題上有4個不同的反饋，就像他回答一個顯示他反饋的a和b顯示b的反饋一樣。 – rickert 2014-09-10 13:00:45

你需要測試單擊元素的值，然後從給予反饋那個答案。這可以通過多種方式完成，但我會說使用$("[name=q1]").click()將是最簡單的，然後使用$(this).val()來檢查答案。

請參考這個小提琴的例子。

http://jsfiddle.net/u3csoave/

來源

2014-09-10 12:31:18

可以使用confirmation alert實現this.there太多jquery demo's可用。

例如看到此鏈接：how to show confirmation alert with three buttons 'Yes' 'No' and 'Cancel' as it shows in MS Word

來源

2014-09-10 12:34:08

我認爲你可以使用確認警報顯示用戶正確的答案，並把一個鏈接的提示框，讓他們改變自己的答案。

來源

2014-09-10 12:42:08 Kajal

jQueryUI的對話框..

function foobar() { 
    $("#dialog").dialog(); 
} 

<div id="dialog" title="Dialog title"> 
    <img src="foo.bar"/> 
</div>

隨後打開的對話框中的單選按鈕點擊數方法。

也許你應該只做一個通用對話框，並傳遞所有需要的信息作爲參數，這樣你就不會得到包含多個對話框的頁面。

來源

2014-09-10 12:57:30

顯示對話單擊單選按鈕

回答

相關問題