Don't like ads? PRO users don't see any ads ;-)
Guest

Untitled

By: a guest on Aug 1st, 2012  |  syntax: jQuery  |  size: 8.05 KB  |  hits: 32  |  expires: Never
download  |  raw  |  embed  |  report abuse  |  print
Text below is selected. Please press Ctrl+C to copy to your clipboard. (⌘+C on Mac)
  1. <html>
  2.   <head>
  3.     <title>Michael's Testery</title>
  4.     <link rel="stylesheet" type="text/css" href="../../assets/mathquill/mathquill.css" />
  5.     <link rel="stylesheet" type="text/css" href="../../assets/jquery/ui.themes/base/jquery.ui.theme.css" />
  6.     <link rel="stylesheet" type="text/css" href="../../assets/jquery/ui.themes/base/jquery.ui.button.css" />
  7.     <link rel="stylesheet" type="text/css" href="../../assets/wysiwyg/jquery.wysiwyg.css" />
  8.     <link rel="stylesheet" type="text/css" href="../../modules/misc/testeryStyle.css" />
  9.     <script type="text/javascript" src="../../assets/jquery/jquery.js"></script>
  10.     <script type="text/javascript" src="../../assets/jquery/jquery.ui.js"></script>
  11.     <script type="text/javascript" src="../../assets/wysiwyg/jquery.wysiwyg.js"></script>
  12.     <script type="text/javascript" src="../../assets/wysiwyg/controls/wysiwyg.image.js"></script>
  13.     <script type="text/javascript" src="../../assets/wysiwyg/controls/wysiwyg.link.js"></script>
  14.     <script type="text/javascript" src="../../assets/wysiwyg/controls/wysiwyg.table.js"></script>
  15.     <script type="text/javascript" src="../../assets/wysiwyg/controls/wysiwyg.image.js"></script>
  16.     <script type="text/javascript" src="../../assets/mathquill/mathquill.js"></script>
  17.     <script type="text/javascript">
  18.       function editFunctionImg(event, img){
  19.         event.stopPropagation();
  20.         $("#feditor").mathquill('latex', $(img).attr("alt"));
  21.         $("#fwysiwyg").data("img", $(img)).dialog("open");
  22.       }
  23.       $(function(){
  24.         $("#symbols").buttonset();
  25.         $("#jwysiwyg").dialog({
  26.           title: "Text Editor",
  27.           width: 700,
  28.           height: 300,
  29.           autoOpen: false,
  30.           dialogClass: 'no-close',
  31.           resizable: false,
  32.           open: function(event, ui) { $("#wysiwyg").wysiwyg("setContent", $(this).data("caller").html()); },
  33.           buttons: {
  34.             Ok: function(){
  35.               $(this).data("caller").html($("#wysiwyg").wysiwyg("getContent"));
  36.               $(this).dialog("close");
  37.             }
  38.           }
  39.         });
  40.         $("#fwysiwyg").dialog({
  41.           title: "Formula Editor",
  42.           width: 330,
  43.           height: 190,
  44.           autoOpen: false,
  45.           dialogClass: 'no-close',
  46.           resizable: false,
  47.           zIndex: 1001,
  48.           open: function(event, ui) { $("#feditor").focus(); },
  49.           buttons: {
  50.             Ok: function(){
  51.               $.post("latexrender/latex2image.php", { latex: $("#feditor").mathquill('latex') },
  52.                 function(data){
  53.                   if($("#fwysiwyg").data("img")===undefined){
  54.                     $("#wysiwyg").wysiwyg("insertImage", $(data).attr("src"), { "alt": $(data).attr("alt"), "onclick": 'parent.editFunctionImg(event, this)'});
  55.                   }else{
  56.                     $("#fwysiwyg").data("img").attr("src", $(data).attr("src")).attr("alt", $(data).attr("alt"));
  57.                   }
  58.                   $("#fwysiwyg").removeData("img");
  59.                   $("#fwysiwyg").dialog("close");
  60.                 }
  61.               );
  62.             }
  63.           }
  64.         });
  65.         $("#wysiwyg").wysiwyg({
  66.           iFrameClass: "wysiwyg_frame",
  67.           rmUnusedControls: true,
  68.           controls: {
  69.             bold : {visible : true},
  70.             italic : {visible : true},
  71.             strikeThrough : {visible : true},
  72.             underline : {visible : true},
  73.             justifyLeft : {visible : true},
  74.             justifyCenter : {visible : true},
  75.             justifyRight : {visible : true},
  76.             justifyFull : {visible : true},
  77.             indent : {visible : true},
  78.             outdent : {visible : true},
  79.             subscript : {visible : true},
  80.             superscript : {visible : true},
  81.             undo : {visible : true},
  82.             redo : {visible : true},
  83.             insertOrderedList : {visible : true},
  84.             insertUnorderedList : {visible : true},
  85.             insertImage : {visible : true},
  86.             h1 : {visible : true},
  87.             h2 : {visible : true},
  88.             h3 : {visible : true},
  89.             increaseFontSize : {visible : true},
  90.             decreaseFontSize : {visible : true},
  91.             html : {visible : true},
  92.             insertTable : {visible : true}
  93.           }
  94.         });
  95.         $("#jwysiwyg").on("click", "#formulaEditor", function(){
  96.           $("#fwysiwyg").dialog("open");
  97.         });
  98.         $("#jwysiwyg .wysiwyg .toolbar").append('<li id="formulaEditor" role="menuitem" unselectable="on" class="formulaEditor" title="Open Formula Editor">Formula Editor</li>');
  99.         $(".input").click(function(){
  100.           $("#jwysiwyg").data("caller", $(this)).dialog("open");
  101.         });
  102.         $("#question_add").click(function(){
  103.           var json = {};
  104.           json[$("#Question .answer").attr("name")] = $("#Question .answer").html();
  105.           $("#"+$("#question_type").find('option:selected').val()+" .answer").each(function(){
  106.             if($(this).html().trim().length){
  107.               json[$(this).attr("name")] = $(this).html();
  108.             }
  109.           });
  110.           alert(JSON.stringify(json));
  111.         });
  112.         $("#question_type").change(function(){
  113.           $("#question_add").show();
  114.           $(".question_customizer").hide();
  115.           $("#"+$(this).find('option:selected').val()).show();
  116.         });
  117.         $("button").click(function(){
  118.           $("#feditor").mathquill("cmd", this.id);
  119.           $("#feditor").focus();
  120.         });
  121.       });
  122.     </script>
  123.   </head>
  124.   <body>
  125.     <div id="jwysiwyg">
  126.       <textarea id="wysiwyg"></textarea>
  127.     </div>
  128.     <div id="fwysiwyg">
  129.       <span id="feditor" class="mathquill-editable"></span>
  130.       <div id="symbols">
  131.         <?php
  132.           $symbols = array(
  133.             "sqrt"     => "&radic;",
  134.             "pm"       => "&plusmn;",
  135.             "neq"      => "&ne;",
  136.             "leq"      => "&le;",
  137.             "geq"      => "&ge;",
  138.             "approx"   => "&asymp;"
  139.           );
  140.           foreach($symbols as $id => $value){
  141.             echo '<button id="'.$id.'">'.$value.'</button>';
  142.           }
  143.         ?>
  144.       </div>
  145.     </div>
  146.     <div id="theForm">
  147.       <form id="Question">
  148.         Question Text: <div name="q_text" class="answer input"></div><br />
  149.         Question Type:
  150.           <select id="question_type">
  151.             <option value="GR" name="q_type">Gridded Response</option>
  152.             <option value="MC" name="q_type">Multiple Choice</option>
  153.             <option value="ER" name="q_type">Extended Response</option>
  154.             <option value="SR" name="q_type">Short Response</option>
  155.             <option value="FR" name="q_type">Fraction Response</option>
  156.             <option value="TF" name="q_type">True/False</option>
  157.           </select><br />
  158.       </form>
  159.       <form id="GR" class="question_customizer">
  160.         Correct Answer: <input name="gr_c_answer" class="answer" type="text" /><br />
  161.       </form>
  162.       <form id="MC" class="question_customizer">
  163.         Correct Answer: <div name="mc_c_answer" class="answer input"></div><br />
  164.         Incorrect Answer 1: <div name="mc_i_answer1" class="answer input"></div><br />
  165.         Incorrect Answer 2: <div name="mc_i_answer2" class="answer input"></div><br />
  166.         Incorrect Answer 3: <div name="mc_i_answer3" class="answer input"></div><br />
  167.       </form>
  168.       <form id="ER" class="question_customizer">
  169.         Suggestion/Hint: <div name="er_suggestion" class="answer input"></div>
  170.       </form>
  171.       <form id="SR" class="question_customizer">
  172.         Suggestion/Hint: <div name="sr_suggestion" class="answer input"></div>
  173.       </form>
  174.       <form id="FR" class="question_customizer">
  175.         Correct Answer: <input name="fr_c_answer" class="answer" type="text" /><br />
  176.       </form>
  177.       <form id="TF" class="question_customizer">
  178.         Correct Answer: <input type="radio" name="tf_answer" value="TRUE" />True&nbsp;&nbsp;<input type="radio" name="tf_answer" value="FALSE" />False<br />
  179.       </form>
  180.       <input type="button" value="Add Question" id="question_add" />
  181.     </div>
  182.   </body>
  183. </html>