<html>
<head>
<title>Michael's Testery</title>
<link rel="stylesheet" type="text/css" href="../../assets/mathquill/mathquill.css" />
<link rel="stylesheet" type="text/css" href="../../assets/jquery/ui.themes/base/jquery.ui.theme.css" />
<link rel="stylesheet" type="text/css" href="../../assets/jquery/ui.themes/base/jquery.ui.button.css" />
<link rel="stylesheet" type="text/css" href="../../assets/wysiwyg/jquery.wysiwyg.css" />
<link rel="stylesheet" type="text/css" href="../../modules/misc/testeryStyle.css" />
<script type="text/javascript" src="../../assets/jquery/jquery.js"></script>
<script type="text/javascript" src="../../assets/jquery/jquery.ui.js"></script>
<script type="text/javascript" src="../../assets/wysiwyg/jquery.wysiwyg.js"></script>
<script type="text/javascript" src="../../assets/wysiwyg/controls/wysiwyg.image.js"></script>
<script type="text/javascript" src="../../assets/wysiwyg/controls/wysiwyg.link.js"></script>
<script type="text/javascript" src="../../assets/wysiwyg/controls/wysiwyg.table.js"></script>
<script type="text/javascript" src="../../assets/wysiwyg/controls/wysiwyg.image.js"></script>
<script type="text/javascript" src="../../assets/mathquill/mathquill.js"></script>
<script type="text/javascript">
function editFunctionImg(event, img){
event.stopPropagation();
$("#feditor").mathquill('latex', $(img).attr("alt"));
$("#fwysiwyg").data("img", $(img)).dialog("open");
}
$(function(){
$("#symbols").buttonset();
$("#jwysiwyg").dialog({
title: "Text Editor",
width: 700,
height: 300,
autoOpen: false,
dialogClass: 'no-close',
resizable: false,
open: function(event, ui) { $("#wysiwyg").wysiwyg("setContent", $(this).data("caller").html()); },
buttons: {
Ok: function(){
$(this).data("caller").html($("#wysiwyg").wysiwyg("getContent"));
$(this).dialog("close");
}
}
});
$("#fwysiwyg").dialog({
title: "Formula Editor",
width: 330,
height: 190,
autoOpen: false,
dialogClass: 'no-close',
resizable: false,
zIndex: 1001,
open: function(event, ui) { $("#feditor").focus(); },
buttons: {
Ok: function(){
$.post("latexrender/latex2image.php", { latex: $("#feditor").mathquill('latex') },
function(data){
if($("#fwysiwyg").data("img")===undefined){
$("#wysiwyg").wysiwyg("insertImage", $(data).attr("src"), { "alt": $(data).attr("alt"), "onclick": 'parent.editFunctionImg(event, this)'});
}else{
$("#fwysiwyg").data("img").attr("src", $(data).attr("src")).attr("alt", $(data).attr("alt"));
}
$("#fwysiwyg").removeData("img");
$("#fwysiwyg").dialog("close");
}
);
}
}
});
$("#wysiwyg").wysiwyg({
iFrameClass: "wysiwyg_frame",
rmUnusedControls: true,
controls: {
bold : {visible : true},
italic : {visible : true},
strikeThrough : {visible : true},
underline : {visible : true},
justifyLeft : {visible : true},
justifyCenter : {visible : true},
justifyRight : {visible : true},
justifyFull : {visible : true},
indent : {visible : true},
outdent : {visible : true},
subscript : {visible : true},
superscript : {visible : true},
undo : {visible : true},
redo : {visible : true},
insertOrderedList : {visible : true},
insertUnorderedList : {visible : true},
insertImage : {visible : true},
h1 : {visible : true},
h2 : {visible : true},
h3 : {visible : true},
increaseFontSize : {visible : true},
decreaseFontSize : {visible : true},
html : {visible : true},
insertTable : {visible : true}
}
});
$("#jwysiwyg").on("click", "#formulaEditor", function(){
$("#fwysiwyg").dialog("open");
});
$("#jwysiwyg .wysiwyg .toolbar").append('<li id="formulaEditor" role="menuitem" unselectable="on" class="formulaEditor" title="Open Formula Editor">Formula Editor</li>');
$(".input").click(function(){
$("#jwysiwyg").data("caller", $(this)).dialog("open");
});
$("#question_add").click(function(){
var json = {};
json[$("#Question .answer").attr("name")] = $("#Question .answer").html();
$("#"+$("#question_type").find('option:selected').val()+" .answer").each(function(){
if($(this).html().trim().length){
json[$(this).attr("name")] = $(this).html();
}
});
alert(JSON.stringify(json));
});
$("#question_type").change(function(){
$("#question_add").show();
$(".question_customizer").hide();
$("#"+$(this).find('option:selected').val()).show();
});
$("button").click(function(){
$("#feditor").mathquill("cmd", this.id);
$("#feditor").focus();
});
});
</script>
</head>
<body>
<div id="jwysiwyg">
<textarea id="wysiwyg"></textarea>
</div>
<div id="fwysiwyg">
<span id="feditor" class="mathquill-editable"></span>
<div id="symbols">
<?php
$symbols = array(
"sqrt" => "√",
"pm" => "±",
"neq" => "≠",
"leq" => "≤",
"geq" => "≥",
"approx" => "≈"
);
foreach($symbols as $id => $value){
echo '<button id="'.$id.'">'.$value.'</button>';
}
?>
</div>
</div>
<div id="theForm">
<form id="Question">
Question Text: <div name="q_text" class="answer input"></div><br />
Question Type:
<select id="question_type">
<option value="GR" name="q_type">Gridded Response</option>
<option value="MC" name="q_type">Multiple Choice</option>
<option value="ER" name="q_type">Extended Response</option>
<option value="SR" name="q_type">Short Response</option>
<option value="FR" name="q_type">Fraction Response</option>
<option value="TF" name="q_type">True/False</option>
</select><br />
</form>
<form id="GR" class="question_customizer">
Correct Answer: <input name="gr_c_answer" class="answer" type="text" /><br />
</form>
<form id="MC" class="question_customizer">
Correct Answer: <div name="mc_c_answer" class="answer input"></div><br />
Incorrect Answer 1: <div name="mc_i_answer1" class="answer input"></div><br />
Incorrect Answer 2: <div name="mc_i_answer2" class="answer input"></div><br />
Incorrect Answer 3: <div name="mc_i_answer3" class="answer input"></div><br />
</form>
<form id="ER" class="question_customizer">
Suggestion/Hint: <div name="er_suggestion" class="answer input"></div>
</form>
<form id="SR" class="question_customizer">
Suggestion/Hint: <div name="sr_suggestion" class="answer input"></div>
</form>
<form id="FR" class="question_customizer">
Correct Answer: <input name="fr_c_answer" class="answer" type="text" /><br />
</form>
<form id="TF" class="question_customizer">
Correct Answer: <input type="radio" name="tf_answer" value="TRUE" />True <input type="radio" name="tf_answer" value="FALSE" />False<br />
</form>
<input type="button" value="Add Question" id="question_add" />
</div>
</body>
</html>