| 
  • If you are citizen of an European Union member nation, you may not use this service unless you are at least 16 years old.

  • Get control of your email attachments. Connect all your Gmail accounts and in less than 2 minutes, Dokkio will automatically organize your file attachments. You can also connect Dokkio to Drive, Dropbox, and Slack. Sign up for free.

View
 

Lecture - Advanced - The MyDailyMath Equation Editor

Page history last edited by Dr. Ron Eaglin 8 years ago

 

The MyDailyMath Equation Editor

 

Prerequisites

 

Lecture - Advanced - User Control Arrays

 

Summary

 

Demonstration of the code of the MydailyMath equation editor - showing the use of User Controls, Html Text Box (Ajax Control), and Math ML embedded in a literal control to show mathematics equations.

 

 

Video 

 

http://online1.daytonastate.edu/player2.php?id=5df07ecf4cea616e3eb384a9be3511bb 

 

Reference Materials

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

MCEquationEditor.aspx
<%@ Page Title="Create a Multiple Choice Question" Language="C#" MasterPageFile="~/LoggedIn.Master" AutoEventWireup="true" CodeBehind="CreateMCQuestion.aspx.cs" Inherits="MyDailyMath.Users.CreateMCQuestion" ValidateRequest="false" %>
<%@ Register Src="~/UserControls/ucEditPanel.ascx" TagPrefix="uc" TagName="EditPanel" %>
<asp:Content ID="Content1" ContentPlaceHolderID="head" runat="server">
    <script type="text/javascript" src="http://cdn.mathjax.org/mathjax/latest/MathJax.js?config=TeX-AMS-MML_HTMLorMML">
    </script>
</asp:Content>
<asp:Content ID="Content2" ContentPlaceHolderID="ContentPlaceHolder1" runat="server">
    <table>
<tr>
<td valign="top">
<uc:EditPanel runat="server" id="ucEP1" Header="Section 1"></uc:EditPanel><br />
<uc:EditPanel runat="server" id="ucEP2" Header="Section 2"></uc:EditPanel><br />
<uc:EditPanel runat="server" id="ucEP3" Header="Section 3"></uc:EditPanel><br />
</td>
<td>
    <asp:TextBox ID="tbContentHTML" runat="server" TextMode="MultiLine" Width="600" Height="450" Visible="false"></asp:TextBox>
    <ajaxToolkit:HtmlEditorExtender ID="html" runat="server" TargetControlID="tbContentHTML" DisplaySourceTab="true" >
    </ajaxToolkit:HtmlEditorExtender>
    <asp:TextBox ID="tbContentText" runat="server" TextMode="MultiLine" Width="600" Height="450" Visible="false" Enabled="true"></asp:TextBox>
    <asp:Panel ID="PanelQuestion" runat="server"  Width="600" Height="450" CssClass="QuestionDisplay" Visible="false"  ScrollBars="Auto">
    <asp:Literal ID="litQuestion" runat="server" ></asp:Literal>
    </asp:Panel>
    <br />
    <asp:Button ID="btnSubmit" runat="server" Text="Enter Question Text" CssClass="QuestionButton"  
        onclick="btnSubmit_Click" Visible="false" />
    </td>
    </tr>
</table>
    <br />
</asp:Content>
 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

MCEquationEditor.aspx.cs

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;
namespace MyDailyMath.Users
{
    public partial class CreateMCQuestion : System.Web.UI.Page
    {
        public string mode { get { return Convert.ToString(Session["QEditMode"]);}
            set {Session.Add("QEditMode", value); } } // html, text, done
        public string editn { get { return Convert.ToString(Session["QEditN"]);}
            set {Session.Add("QEditN", value); } } // 1, 2, or 3
        protected void Page_Load(object sender, EventArgs e)
        {
            ucEP1.HtmlButtonClick += new UserControls.ucEditPanel.HtmlButtonClickHandler(ucEP1_HtmlButtonClick);
            ucEP2.HtmlButtonClick += new UserControls.ucEditPanel.HtmlButtonClickHandler(ucEP2_HtmlButtonClick);
            ucEP3.HtmlButtonClick += new UserControls.ucEditPanel.HtmlButtonClickHandler(ucEP3_HtmlButtonClick);
            ucEP1.TextButtonClick += new UserControls.ucEditPanel.TextButtonClickHandler(ucEP1_TextButtonClick);
            ucEP2.TextButtonClick += new UserControls.ucEditPanel.TextButtonClickHandler(ucEP2_TextButtonClick);
            ucEP3.TextButtonClick += new UserControls.ucEditPanel.TextButtonClickHandler(ucEP3_TextButtonClick);
        }
        protected void btnSubmit_Click(object sender, EventArgs e)
        {
            btnSubmit.Visible = true;
            btnSubmit.Text = "Submit Question to Database";
            if (mode == "html")
            {
                if (editn == "1") ucEP1.Text = tbContentHTML.Text;
                if (editn == "2") ucEP2.Text = tbContentHTML.Text;
                if (editn == "3") ucEP3.Text = tbContentHTML.Text;
                tbContentHTML.Visible = false;
                tbContentText.Visible = false;
                litQuestion.Text = fullContent();
                PanelQuestion.Visible = true;
                mode = "done";
                return;
            }
            if (mode == "text")
            {
                if (editn == "1") ucEP1.Text = tbContentText.Text;
                if (editn == "2") ucEP2.Text = tbContentText.Text;
                if (editn == "3") ucEP3.Text = tbContentText.Text;
                tbContentHTML.Visible = false;
                tbContentText.Visible = false;
                litQuestion.Text = fullContent();
                PanelQuestion.Visible = true;
                mode = "done";
                return;
            }
            string final = fullContent();
            // submit the question to database here
        }
        private string fullContent()
        {
            return ucEP1.Text + ucEP2.Text + ucEP3.Text;
        }
        private void setHTMLEdit(string n)
        {
            tbContentHTML.Visible = true;
            PanelQuestion.Visible = false;
            tbContentText.Visible = false;
            btnSubmit.Visible = true;
            btnSubmit.Text = "Submit HTML for Section " + n;
            mode = "html";
            editn = n;            
        }
        private void setTextEdit(string n)
        {
            tbContentHTML.Visible = false;
            PanelQuestion.Visible = false;
            tbContentText.Visible = true;
            btnSubmit.Visible = true;
            btnSubmit.Text = "Submit Text for Section " + n;
            mode = "text";
            editn = n;
        }
        protected void ucEP1_HtmlButtonClick(object sender, EventArgs e)
        {
            setHTMLEdit("1");
            tbContentHTML.Text = ucEP1.Text;
        }
        protected void ucEP2_HtmlButtonClick(object sender, EventArgs e)
        {
            setHTMLEdit("2");
            tbContentHTML.Text = ucEP2.Text;
        }
        protected void ucEP3_HtmlButtonClick(object sender, EventArgs e)
        {
            setHTMLEdit("3");
            tbContentHTML.Text = ucEP3.Text;
        }
        protected void ucEP1_TextButtonClick(object sender, EventArgs e)
        {
            setTextEdit("1");
            tbContentText.Text = ucEP1.Text;
        }
        protected void ucEP2_TextButtonClick(object sender, EventArgs e)
        {
            setTextEdit("2"); 
            tbContentText.Text = ucEP2.Text;
        }
        protected void ucEP3_TextButtonClick(object sender, EventArgs e)
        {
            setTextEdit("3"); 
            tbContentText.Text = ucEP3.Text;
        }
    }
} 

 

 

Additional Information

 

http://www.mathjax.org/ - MathJax JavaScript library

 

http://www.asp.net/ajax  - AJAX Control Toolkit

 

http://visualstudiogallery.msdn.microsoft.com/27077b70-9dad-4c64-adcf-c7cf6bc9970c/  - NuGet Package Manager

 

Part of the Case Study - My Daily Math

 

 

 

 

 

 

COP 4834 Lectures Page

Comments (0)

You don't have permission to comment on this page.