Table of Contents Chapter 10: Formatting Text

Chapter 9: Customizing User Interface and Style

In Chapter 1: Understanding Lesson Element, we learned that the Digital Teacher web lesson window is composed of several elements - chapter, inline reading, question, answers, and menu. By changing the way these elements and their contents are displayed, we can customize the graphical user interface and style to meet our particular needs.

Essentially, to customize the user interface is to change the value of each relevant Javascript/VBScript variable and style sheet in your Digital Teacher web-based lesson template file.
Each group of variables that you can change values for is followed by "comments" starting two forward slashes (//) for Javascript, and one apostrophe (') for VBScript. Also, please refer to Appendix: Script Comments - Digital Teacher Exam Page (.ASP)

Note: You must not directly work on the original master template. Always work on a duplicate file.)

In this chapter, we will present you interactive demonstrations to show you what the result from each setting looks like. If you haven't done so, please turn your browser's cookies option on.

Displaying Messages

Messages	Displayed when	Variables
You need to answer the question first.	The student attempts to see the correct answer without answering a question.	gNeedAns
Answer is not available on this question.	The current lesson does not allow to see the correct answers.	gNoAns
Try yourself first.	The student attempts to see the correct answer without answering an individual Fill-in-the-blank question item.	gTryFirst
Lesson time is up.	Time is elapsed in a timed lesson.	gLessonTimesUp
Reading time is up.	Time is elapsed in a timed reading.	gReadingTimesUp
You need to answer all the questions.	The student attempts to submit without completing all the questions. (when a lesson requires the student result to be submitted and the lesson is configured to force the student to answer all questions)	gForce
Your performance result will be submitted. Would you like to continue?	The student clicks the Submit link or button. Note: This message is followed by the next message if the student has not completed all questions.	gSubmit
You have not completed answering all the questions. Do you still want to submit?	(See above)	gConfirm
Time is up. Click OK to submit your results.	Time is elapsed in a timed lesson, and the student result must be submitted.	gTimesUpSubmit
Correct!	The student clicks the [Show me the Answer] link or button. The student answer is correct.	gCorrect
Incorrect!	Same as above. The student answer is not correct.	gIncorrect
Partly correct!	Same as above. The student answer is partly correct	gPartCorrect
Correct answer(s):	Same as above - followed by the correct answer(s).	gCoAnswer
Point you have earned:	Same as above - followed by the score earned.	gEarnedPoint

Feedback Marks, Answer, Hint, and Reading links (Text or Image)

Each feedback mark indicates whether the student has answered a question correctly, incorrectly, or partly correctly. The mark is displayed to the left of the question box when the student answers a question. These marks are shown to the student only when the Show Correct Answers property is set to true.

Text: O X 0 Images:

The Hint, Answer, and Reading links can be displayed either in text or in images.

Text: Hint Answer Reading Images: Hint Answer Reading

Formatting Page Element Blocks

To make the background of an element transparent, do not include the background-color property in the style rule.
The back color of Chapter Navigation and Answers should always be ligher than text colors.
Font weight: 400 - normal, 700 - bold

Elements	Font Face	Style

Chapter Name		#ChapterName { }
Chapter Navigation		#ChapterNav { }
Inline Reading		#Reading { }
Question Number		#QNumber { }
Question		#Question { }
Answer Captions		SPAN.OptLabel { }
Answers		#Options { }
Menu Bar		#Menubar { }
Lesson Timer	To have an example timer displayed, check the box to the left. For the purpose of demonstration, the timer's format, border, and position are pre-configured. But they can be set.	#ReadOut { }
Show me the result

Setting Borders

With no border and back color, the background of an element becomes transparent and text inside the element will look more blended and natural. However, if you prefer to a more formatted look with each element displayed as a distinct block, you might want to show border (and add backcolor). This can help viewers easily distinguish one block from another.

Elements	Border (Width)	Variables
Chapter		gBorderChp
Inline Reading		gBorderRead
Question		gBorderQtn
Answers		gBorderOpt
Menu Bar		gBorderMenu
Lesson Timer (Please see the previous topic)		gBorderTime
Show me the result

Changing Position and Dimension

- The height of each element is dynamically set to the size of actual content
- See Positioning Definitions for Top, Left, Right, and Width.

Elements	Top (pixels)	Left (pixels)	Right (pixels)	Width (ratio)	Spacing (pixels)	Variables
Chapter				n/a	n/a	chapterTop chapterLeft chapterRight
Inline Reading			n/a	of Window Width	n/a	readingTop readingLeft readingWidth
Question (with reading)				n/a	n/a	questionTop questionLeft questionRight
Question (without reading)	Same as above	(ratio) of Window width	(ratio) of Window width	n/a	n/a	qtnLeftRatio qtnRightRatio
Answers				n/a		answerTop answerLeft answerRight answerSpace
Lesson Timer (Please see the previous topic)						timerTop timerLeft timerWidth
Show me the result

Scroll Bar, Question Number, and Question Divider

If your (more importantly, your student's) browser is Internet Explorer, you can have the Inline Reading box display scrollbars. Netscape Navigator does not provide this functionality. The scrollbars in the reading box are displayed only if the content (the reading) exceeds the height of the browser window.

Table of Contents (Course Style)

Popup Reading, Hint, and Report

Performance Report and Grade Book (.ASP only)

When the Show Performance Report upon Completion property is set to true for an ASP type lesson, a report that shows the student's performance result is presented immediately after the student's response is submitted. This same report is also available from the Digital Teacher online gradebook.

You can change the report title and captions to your language, and also format the look of the report by modifying values of the variables shown in the table below. To see how it work, change each value and click Show me the result at the end of of the table.

Showing answers (0 - No, 1 - Yes) Note: Setting this option to 1 shows question text, answer choices, correct answers, and student responses. Choosing this option can increase the report page loading time.		sRptShowAnswer
Report Title		sRptTitle
Caption for the Question column		sRptQuestion
Caption for the Score column		sRptScore
Caption for the Earned column		sRptEarned
Caption for the Percent column		sRptPercent
Caption for the Mark column		sRptMark
Report footer summary text		sRptFooter
"Correct" mark		sRptCorrect
"Incorrect" mark		sRptIncorrect
"Partly Correct" mark		sRptPartly
The report is presented in a table. You can define the report style by modifying the style sheet definitions for the table related selectors such as TABLE, TH, and TD. For example, to hide borders of the report table, add `border-style:none;` to the TABLE{} and TH{} rules. To set the background color "white", add {`background-color:white`} to the TD selector. To make the table background transparent so that the back color or the background image on the report page can be seen through, do not add background-color. Please refer to the Digital Teacher lesson template file or the dtGradeBook.asp file to see the default style and rules.		<STYLE> TABLE { } TH { } TD { } CAPTION.title { } TD.footer { } </STYLE>"
Show me the result
Changing the look of the Digital Teacher online gradebook (example) is basically same as the above examples. We will not repeat the demonstration in this chapter. Please refer to the style sheet and the sCaptions variable in the dtGradeBook.asp file.		<STYLE></STYLE> sCaptions

These variables can be set inside from the following files.

the Digital Teacher lesson template (dtTemplate.ht_) and
the Digital Teacher Online Gradebook (dtGradeBook.asp).

Table of Contents Chapter 10: Formatting Text

Show Reading Scrollbar (IE only).	bScrollbar
Show Question Number for each question.	gShowQtnNum
Merge Question Number with question text (when Question Number is shown). Note: For the purpose of demo, each question text in the demo lesson page is tagged with the <P> element. This will add automatic line break after the question number.	gInQtn
Restart question number at 1 for every chapter. (when Question Number is shown)	gPerChp
Show Horizontal Rules between questions. (for Single-page style lesson only) Note: Checking this option shows the result on the Single-page style lesson. To see results from other options in the current option group on the Multi-page style, uncheck this option.	gDivider
Show me the result

Color of the topic link that hasn't yet been pointed at.		A.conLink:link { }
Color of the topic link that has been clicked.		A.conLink:visited { }
Color of the topic link that is pointed to with mouse.		A.conLink:hover { }
Font face and size of the topic link, and bullet color.		#Topic { }
Show me the result
Tip: The Table of Contents can look like a vertical menu bar by reducing the width of the Reading box, and decreasing the length of topic text. To decrease the text length, locate `mCon += qKH(LZ2(A[c][1][q][1])).substring(0,40)+'...</A></LI>';` and change 40 to a smaller number, such as 25 (characters).		Show me an example

Popup Reading and Hint (Font face, size, and color)	gPopWinSize gPopWinFace gPopWinColor
Report title and style (for the report shown during a lesson)	gRptTitle gRptStyle