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

  • Social distancing? Try a better way to work remotely on your online files. Dokkio, a new product from PBworks, can help your team find, organize, and collaborate on your Drive, Gmail, Dropbox, Box, and Slack files. Sign up for free.

View
 

CET 4584 Assignment 6B - Using AJAX inYour Application

Page history last edited by PBworks 9 years, 3 months ago

 Assignment 6B Using AJAX in Your Application

 

Objectives

 

To use AJAX tools as part of a .NET application

 

Assignment

 

For this assignment you will need the AJAX toolkit (VS 2008 folks, it should already be there). The toolkit with a lot of great information is available at http://www.asp.net/ajax/AjaxControlToolkit/Samples/

 

There are plenty of really neat html editors out there (my favorite is tiny_mce) but the one at this site is very easy to use and is part of the toolkit, so installing it is prety easy. You will be using the HTMLEditor.

 

The other tool you will be using is the AutoComplete.

 

So now your user can get to the page to create a question, but they cannot actually create a question. Well - we are ready to change all that, you are going to make a page that allows them to create a Short Answer Question. Now that we have gotten this far we will need some tables and stored procedures. You of course will write the code that accesses these. Everyone will use the same tables and stored procedures, but who will write these ? Since this is part of your project - the group will need to assign someone to work on table and stored procedure creation - and all the class members will use the same set of tables and stored procedures.

 

(If you look at your next project assignment you will notice that you have a table schema due to me in a couple of weeks).

 

So now your application will allow me to login, select to create a question, allow me to go to a short answer question, complete by filling in a Title, Question text, and multiple correct answers. The question should also have a feedback to give to the user when they complete the question.

 

Oh yeah ! - the AJAX, the question box and the feedback box should use an html editor. The Question Title box and the Correct Answer boxes should AutoComplete.

 

You will work together as a class, however everyone should implement this on their own site (in other words their will be a copy for each student in the class).

 

 

Information

 

AJAX performs one simple function, it allows you to have portions of a web page communicate with the server.  This is very nice as it avoids full page refreshes when you wish to have 2-way communication with a server or read values from a database without refreshing the page.

 

 

Estimated Completion Time

 

This is another 10-15 hour assignment (including watching video)

 

Supporting Lectures 

 

It is time - You should use Video #14 from http://www.asp.net/LEARN/videos/ however you may be interested in many of  the other video lectures at this site.

 

Questions and Answers

 

What do you mean by question title?

 

Every question should have these database elements;

 

Question Table

 

Question ID - A unique identifier for the question - should make this a database identity

Question Title - A simple title entered by the user for the question

Question Text - The full text of the question. You will probably want this to be html

 

Question Type - This will probably be a coded entry for Short Answer, Multiple Choice, True/False

 

Question Entered By - The ID or Username of the person who entered the question

Question Entered Date - When was this question created.

 

Based on the type you will have different types of question answers. A multiple choice question will have multiple answers which point back to the question ID.

 

Multiple Choice Question Answers

 

QuestionAnswerID - integer identity

QuestionID - Forign Key integer pointing to the Question Table

 

AnswerText - The text of the answer

PercentCorrect - Some answers are good for partial credit

AnswerOrder - Integer to specify which order the answer should display in when displaying a question

 

AnswerComments - Text that the instructor may want to give

 

Question Entered By - The ID or Username of the person who entered the question

Question Entered Date - When was this question created.

 

Short Answer Question Answers

 

QuestionAnswerID - integer identity

QuestionID - Forign Key integer pointing to the Question Table

 

AnswerText - The text of the answer

PercentCorrect - Some answers are good for partial credit

CaseSenistiveBit - True if the answer is case sensitive

 

MatchCode - In grading specifies whether the answer must be EXACT, or CONTAINS

 

AnswerComments - Text that the instructor may want to give

 

Question Entered By - The ID or Username of the person who entered the question

Question Entered Date - When was this question created.

 

 

External Resources

 

How Do you Add A RICH Text Box instead of a Text Box?

 

Well you are not going to write all the source code for a JavaScript based rich text box, but luckily this is pretty easy to do.

 

1. Go to http://tinymce.moxiecode.com/download.php and download the main package.

2. Create a js directory in your application (you will place JavaScript Libraries here).

3. Under the js directory create a tiny_mce directory and place the contents of the tiny_mce directory (from your download) in this directory. This will include diretories langs, plugins, themes, and utils. Also place the files license.txt, tiny_mce.js, tiny_mce_popup.js, and tiny_mce_src.js

 

4. You can now convert any Text Box into a rich text box. Try putting the code below into the head section of you application aspx file.  This assumes the files are in a subdirectory of the directory your forms are in - adjust the src to ensure you are pointing to the correct location. Also make sure the elements under the init points at the name of the text box you are making "rich", the text box should be a multiline type text box. You might get an error the first tiem you run this, read the error message - you should be able to figure it out....

 

    <script src="js/tiny_mce/tiny_mce.js" type="text/javascript"></script>
    <script type="text/javascript">
     tinyMCE.init({
         mode:"exact",
         elements:"<%=txtBoxComment.ClientID%>",
         theme:"advanced",
         skin:"o2k7",
         plugins:"preview,paste,visualchars,inlinepopups",
         theme_advanced_buttons1:"cut,copy,paste,pastetext,pasteword,|,bullist,numlist,outdent,indent,|,undo,redo,|,link,unlink,|,removeformat,cleanup,|,visualchars,visualaid,code,preview",
         theme_advanced_buttons2:"formatselect,fontsizeselect,|,bold,italic,underline,strikethrough,blockquote,|,justifyleft,justifycenter,justifyright,justifyfull,|,forecolor,backcolor",
         theme_advanced_buttons3:"",
         theme_advanced_toolbar_location:"top",
         theme_advanced_toolbar_align:"left",
         theme_advanced_statusbar_location:"bottom",
         theme_advanced_resizing:false

});

This will work with a Text Box in your application
<asp:textbox id="TextBoxComment" runat="server" textmode="multiline" /> 

 

 

Grading Criteria

 

Grading criteria

 

Comments (0)

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