Default.aspx 4.6 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132
  1. <%@ Page Language="C#" %>
  2. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
  3. "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
  4. <html xmlns="http://www.w3.org/1999/xhtml">
  5. <head id="Head1" runat="server">
  6. <title>Custom Events Example</title>
  7. </head>
  8. <body>
  9. <form id="form1" runat="server">
  10. <asp:ScriptManager ID="ScriptManager1" runat="server" >
  11. <Scripts>
  12. <asp:ScriptReference Path="question.js" />
  13. <asp:ScriptReference Path="section.js" />
  14. </Scripts>
  15. </asp:ScriptManager>
  16. <script type="text/javascript">
  17. // Add handler to init event
  18. Sys.Application.add_init(appInitHandler);
  19. function appInitHandler() {
  20. // create components
  21. $create(Demo.Question, {correct: '3'},
  22. {select: onAnswer},null, $get('Question1'));
  23. $create(Demo.Question, {correct: '3'},
  24. {select: onAnswer},null, $get('Question2'));
  25. $create(Demo.Question, {correct: '3'},
  26. {select: onAnswer},null, $get('Question3'));
  27. $create(Demo.Question, {correct: '3'},
  28. {select: onAnswer},null, $get('Question4'));
  29. $create(Demo.Section, null,
  30. {complete: onSectionComplete},null, $get('group1'));
  31. $create(Demo.Section, null,
  32. {complete: onSectionComplete},null, $get('group2'));
  33. }
  34. function onAnswer(question) {
  35. // If all questions in this section answered,
  36. // raise complete event
  37. var section = question.get_element().parentElement;
  38. var questions = section.children;
  39. $get(question.get_id() + 'Status').innerHTML = '';
  40. for (var i=0; i<questions.length; i++) {
  41. if (questions[i].selectedIndex === -1) {
  42. return;
  43. }
  44. }
  45. $find(section.id).raiseComplete();
  46. }
  47. function onSectionComplete(section) {
  48. // Change background color of <div>.
  49. section.get_element().style.backgroundColor = 'yellow';
  50. }
  51. function done() {
  52. // Display correct answers where needed.
  53. var c = Sys.Application.getComponents();
  54. for (var i=0; i<c.length; i++) {
  55. var type = Object.getType(c[i]).getName();
  56. if (type !== 'Demo.Question') continue;
  57. var element = c[i].get_element();
  58. var answer = element.selectedIndex;
  59. var correct = $find(c[i].get_id()).get_correct();
  60. var statusElement = c[i].get_id() + 'Status';
  61. if (answer !== correct) {
  62. $get(statusElement).innerHTML = 'Incorrect. Try again.';
  63. }
  64. else
  65. {
  66. $get(statusElement).innerHTML = 'Correct.';
  67. }
  68. }
  69. }
  70. function resethandler() {
  71. var c = Sys.Application.getComponents();
  72. for (var i=0; i<c.length; i++) {
  73. var type = Object.getType(c[i]).getName();
  74. if (type === 'Demo.Question') {
  75. var element = c[i].get_element();
  76. element.selectedIndex = -1;
  77. var answer = element.selectedIndex;
  78. var statusElement = c[i].get_id() + 'Status';
  79. $get(statusElement).innerHTML = '';
  80. }
  81. else if (type === 'Demo.Section') {
  82. c[i].get_element().style.backgroundColor = 'White';
  83. }
  84. }
  85. }
  86. </script>
  87. <h3>Addition</h3><br />
  88. <div id="Group1">
  89. 2 + 2 =
  90. <select id="Question1">
  91. <option>2</option>
  92. <option>22</option>
  93. <option>4</option>
  94. <option>5</option>
  95. </select><span id="Question1Status"></span><br />
  96. 2 + 3 =
  97. <select id="Question2" >
  98. <option>3</option>
  99. <option>23</option>
  100. <option>5</option>
  101. <option>6</option>
  102. </select><span id="Question2Status"></span><br />
  103. </div><br /> <br />
  104. <h3>Subtraction</h3><br />
  105. <div id="Group2">
  106. 2 - 1 =
  107. <select id="Question3" >
  108. <option>2</option>
  109. <option>0</option>
  110. <option>1</option>
  111. <option>-2</option>
  112. </select><span id="Question3Status"></span><br />
  113. 2 - 2 =
  114. <select id="Question4" >
  115. <option>2</option>
  116. <option>-2</option>
  117. <option>0</option>
  118. <option>-4</option>
  119. </select><span id="Question4Status"></span><br />
  120. </div><br /><br />
  121. <input id="Submit1" type="button" value="Check Answers" onclick="done()" />
  122. <input id="Reset1" type="button" value="Start Again" onclick="resethandler()" />
  123. </form>
  124. </body>
  125. </html>