Survey of existing page views and markup: Difference between revisions
From MoodleDocs
Amy Groshek (talk | contribs) |
Amy Groshek (talk | contribs) |
||
(45 intermediate revisions by the same user not shown) | |||
Line 5: | Line 5: | ||
==Notes== | ==Notes== | ||
* As first concern is non-editing view, student views will be the focus of this initial survey | * As first concern is non-editing view, student views will be the focus of this initial survey. There are some activities which require learners to edit entries/upload files, etc. I am including those screens as learner activity although they have many of the same characteristics as teacher or admin editing screens. | ||
==File resource== | ==File resource== | ||
Line 83: | Line 83: | ||
==Choice activity== | ==Choice activity== | ||
===Visible Conventions=== | ===Visible Conventions=== | ||
* | * *No* header to choice view on standard landing page | ||
* | * Form element with choice options and submit button | ||
* | * Header preceding table presenting results | ||
* Table containing results | |||
** table.results.anonymous | |||
** table.results.names | |||
[[Image:landing-choice-activity.png|600x400px|thumb|border|center|Learner landing page of choice activity, no option selected]] | [[Image:landing-choice-activity.png|600x400px|thumb|border|center|Learner landing page of choice activity, no option selected]] | ||
[[Image: | [[Image:results-chat-activity-screenshot.png|600x400px|thumb|border|center|Results choice activity]] | ||
[[Image: | [[Image:anonymous-results-chat-activity-screenshot.png|600x400px|thumb|border|center|Anonymous results choice activity]] | ||
[[Image:landing- | ==Database activity== | ||
===Visible Conventions=== | |||
* List of entries | |||
* Single entry | |||
* Activity header (visible on *View list* and *Search* tabs but not others) | |||
* .tabtree tabs for access if different views/functionality | |||
* .defaulttemplate entry items (no wrapper around the collection), .defaulttemplate class is used on both list view and single view | |||
* div.paging containing links to additional pages within the view (for both list and single view) | |||
* Search fields for each element of database entries, as well as author firstname and author lastname, provided by Search view | |||
* On List view, div.datapreferences form which allows user to alter number of entries shown and organization of entries, also includes search input | |||
* New entry form including: | |||
** Header | |||
** Form elements as determined by template | |||
** Buttons for Save and View, Save and Add Another | |||
[[Image:view-list-database-activity.png|600x400px|thumb|border|center|List view, learner landing page of database activity]] | |||
[[Image:view-list-editing-database-activity.png|600x400px|thumb|border|center|List view, learner landing page of choice activity, learner has editing options bc these are the learner's entries]] | |||
[[Image:view-single-database-activity.png|600x400px|thumb|border|center|Learner landing page of choice activity, no option selected]] | |||
[[Image:search-database-activity.png|600x400px|thumb|border|center|Learner landing page of choice activity, no option selected]] | |||
[[Image:add-entry-database-activity.png|600x400px|thumb|border|center|Learner landing page of choice activity, no option selected]] | |||
==Forum activity== | ==Forum activity== | ||
===Visible Conventions=== | |||
* div#intro.generalbox for activity intro/description | |||
* div.forumaddnew containing form element for adding a new discussion thread | |||
* div.paging for providing an index of multi-page listings of topics | |||
* table.forumheaderlist contains all forum threads, some metadata | |||
* div.discussioncontrols alters organization of discussion threads | |||
* div.forumpost | |||
** div.header, contains picture, header, author, and date | |||
** div.maincontent, contains post content | |||
** div.side, contains .left spacer element and control options for editing, deleting, and rating | |||
[[Image:topic-table-forum-activity.png|600x400px|thumb|border|center|Discussion thread table, forum activity]] | |||
[[Image:thread-forum-activity.png|600x400px|thumb|border|center|A single forum thread]] | |||
[[Image:reply-forum-activity.png|600x400px|thumb|border|center|Add post, single forum thread]] | |||
==Glossary activity== | ==Glossary activity== | ||
===Visible Concepts=== | |||
* Similar to database activity, in that the view features a tabbed interface with content below the tabs | |||
* div#intro | |||
* form element, no identifying ID or classname, which provides search funct | |||
* div.glossaryaddentry for adding a new glossary entry | |||
* div.glossarydisplay | |||
** div.tabtree | |||
** div.entrybox | |||
*** table.glossarypost contains a single glossary entry, with title, concept, and editing icons--these are very similar in layout and data to an individual forum post and an individual database module entry (each has associated metadata and controls and is displayed in a list view in some cases) | |||
* editing view for adding a new glossary entry (a very basic formslib interface, form elements are grouped, submit buttons @ bottom) | |||
[[Image:glossary-activity.png|600x400px|thumb|border|center|Basic list view of entries, glossary activity]] | |||
[[Image:glossary-add-entry-activity.png|600x400px|thumb|border|center|Add a new entry, glossary activity]] | |||
==Lesson activity== | ==Lesson activity== | ||
===Visual Conventions=== | |||
* Single header | |||
* Question, answer options, and submit button are a single form element, though the submit button is not visually grouped with the other elements | |||
* .box.contents content area (with border) | |||
* .answeroption elements follow .box.contents, ungrouped | |||
* .box.ongoing ongoing score element | |||
* .box.branchbuttoncontainer element containing all branch buttons | |||
* progress bar element | |||
[[Image:lesson-1-activity.png|600x400px|thumb|border|center]] | |||
[[Image:lesson-2-add-entry-activity.png|600x400px|thumb|border|center]] | |||
[[Image:lesson-3-add-entry-activity.png|600x400px|thumb|border|center]] | |||
[[Image:lesson-4-add-entry-activity.png|600x400px|thumb|border|center]] | |||
==Quiz activity== | ==Quiz activity== | ||
This is inarguably the most complex of the modules I've looked at so far. | |||
===Visible Conventions=== | |||
* Landing page - view.php presents a landing page. If the learner already has completed attempts, a table of those attempts is also displayed. | |||
** h2.main heading with module title | |||
** div#intro intro/description text in | |||
** div.quizinfo with info about quiz settings (as relevant to learner) | |||
** h2.main heading "Summary of Quiz Attempts" (same hierarchy header as activity title) | |||
** table.quizattemptsummary if applicable, presents learner with table of attempts | |||
** div#feedback displays scoring information, feedback | |||
** div.quizattempt contains form with input element to start attempt | |||
* startattempt.php | |||
** displayed in the event that password is required | |||
** div#intro displayed again (user is not always shown this screen) | |||
** form element with text field for password entry, Continue, and Cancel buttons (in the event that a password is required) | |||
* attempt.php | |||
** form element containing questions | |||
*** div.que (ID gives question number, addl classes tell question type & assessment mode) | |||
**** div.info - float:left, question metadata displayed: question metadata, question edit link, question flag option | |||
**** div.content - question content, form elements for responses, "Check" button for immediate answer checking, and .im-feedback presenting feedback from that immediate check | |||
* summary.php | |||
** h2.main quiz header | |||
** h3.main "Summary of attempt | |||
** table.quizsummaryofattempt displays results for each question in this attempt | |||
** div.submitbtns displays *Submit all and finish* btn to complete attempt | |||
* review.php | |||
** table.quizreviewsummary, presented on first page of review only | |||
** div.info | |||
** div.content - .content contains slightly different elements in order to show per-question remediation | |||
** div.submitbtns contains a link instead of a button, as with the live quiz attempt, can read *Next >* or *Finish Review* | |||
[[Image:quiz-1.png|600x400px|thumb|border|center]] | |||
[[Image:quiz-2.png|600x400px|thumb|border|center]] | |||
[[Image:quiz-3.png|600x400px|thumb|border|center]] | |||
[[Image:quiz-4.png|600x400px|thumb|border|center]] | |||
[[Image:quiz5.png|600x400px|thumb|border|center]] | |||
[[Image:quiz-6.png|600x400px|thumb|border|center]] | |||
[[Image:quiz-7.png|600x400px|thumb|border|center]] | |||
[[Image:quiz-8.png|600x400px|thumb|border|center]] | |||
==SCORM activity== | ==SCORM activity== | ||
===Visual Conventions=== | |||
* view.php - there is a settings option for students to skip this view entirely | |||
** h2.main with activity title | |||
** div#intro with activity description | |||
** div.generalbox which displays the content structure of the scorm package | |||
** div.scorm-center - contains buttons to player.php/start scorm session and *Start new attempt* checkbox | |||
* player.php | |||
* .altfinishlink, displayed when the scorm activity has launched in a new window | |||
* div#scormpage containing scorm nav and player (highly specialized and probably not the prime target of a standardization effort) | |||
[[Image:scorm-1.png|600x400px|thumb|border|center]] | |||
[[Image:scorm-2.png|600x400px|thumb|border|center]] | |||
[[Image:scorm-3.png|600x400px|thumb|border|center]] | |||
==Survey activity== | ==Survey activity== | ||
=== Visible Conventions === | |||
* view.php | |||
** Some variation with different surveys but these are the basic conventions | |||
** div#intro | |||
** bare div with instructions "All questions are required and must be answered" | |||
** Individual questions in table elements | |||
** input "Click here to continue" | |||
* view.php if learner has completed survey | |||
** two h2.main with learner completion information | |||
** div.resultgraph displaying survey results | |||
* save.php | |||
** div#notice | |||
** div.continuebutton | |||
[[Image:survey-1.png|600x400px|thumb|border|center]] | |||
[[Image:survey-2.png|600x400px|thumb|border|center]] | |||
[[Image:survey-resultgraph.png|600x400px|thumb|border|center]] | |||
==Wiki activity== | ==Wiki activity== | ||
===Visible Conventions=== | |||
* view.php | |||
** div#info.generalbox | |||
** div.tabtree navigation tabs | |||
** div.wiki_right - div containing *Printer-friendly version* link | |||
** h2.wiki_headingtitle - this serves the purpose of the h2.main on other pages, and might be placed above the div#info.generalbox as activity title. That is what is printed here: the activity title. | |||
** div.generalbox div.text_to_html presenting rendered content | |||
* edit.php | |||
** div#info.generalbox | |||
** div.tabtree navigation tabs | |||
** h2.wiki_headingtitle - this serves the purpose of the h2.main on other pages, and might be placed above the div#info.generalbox as activity title. That is what is printed here: the activity title. | |||
** form element (no wrapper) with HTMLeditor, tags, and button fieldsets | |||
* comments.php | |||
** div#info.generalbox | |||
** div.tabtree navigation tabs | |||
** h2.wiki_headingtitle - this serves the purpose of the h2.main on other pages, and might be placed above the div#info.generalbox as activity title. That is what is printed here: the activity title. | |||
** div.midpad - with centered link *Add comment* | |||
** table.generaltable presenting individual comments with metadata | |||
* history.php | |||
** div#info.generalbox | |||
** div.tabtree navigation tabs | |||
** h2.wiki_headingtitle - this serves the purpose of the h2.main on other pages, and might be placed above the div#info.generalbox as activity title. That is what is printed here: the activity title. | |||
** h4.wiki_headingtime - small caps italics presenting last edited time (this is not a header application as markup implies) | |||
** form#diff containing table with history, diffs | |||
** h2.main used on page views presenting diffs only | |||
** div.wiki-diff-container - div containing diff views | |||
** div.wiki-diff-paging - div containing pagination and links for diff views | |||
* map.php | |||
** div#info.generalbox | |||
** div.tabtree navigation tabs | |||
** h2.wiki_headingtitle - this serves the purpose of the h2.main on other pages, and might be placed above the div#info.generalbox as activity title. That is what is printed here: the activity title. | |||
** div.midpad - with centered drop-down select | |||
** table.wiki_editor.generalbox with results of dropdown selection displayed | |||
* files.php | |||
** div#info.generalbox | |||
** div.tabtree navigation tabs | |||
** div.generalbox containing wiki files tree | |||
[[Image:wiki-1.png|600x400px|thumb|border|center]] | |||
[[Image:wiki-2.png|600x400px|thumb|border|center]] | |||
[[Image:wiki-3.png|600x400px|thumb|border|center]] | |||
[[Image:wiki-4.png|600x400px|thumb|border|center]] | |||
[[Image:wiki-5.png|600x400px|thumb|border|center]] | |||
[[Image:wiki-6.png|600x400px|thumb|border|center]] | |||
[[Image:wiki-7.png|600x400px|thumb|border|center]] | |||
[[Image:wiki-diff.png|600x400px|thumb|border|center]] | |||
==Workshop activity== | ==Workshop activity== | ||
I'm skipping this last activity because from what I see it is very similar in presentation to activities I've already covered. Further, I have very little experience with the workshop, and won't know where obscure views are. |
Latest revision as of 18:43, 13 November 2012
Overall Conventions
- First, the no-brainer: page content is inside of #region-main #region-content
- Classes .box and .generalbox are utilized in many screen views, but not consistently across different resource and activity types
- Most resources and activities use a combination of IDs and classes to style components
Notes
- As first concern is non-editing view, student views will be the focus of this initial survey. There are some activities which require learners to edit entries/upload files, etc. I am including those screens as learner activity although they have many of the same characteristics as teacher or admin editing screens.
File resource
Visible Conventions
- First-level header (optional)
- Content embedded or as link
- Content description, "intro"
Folder resource
Visible Conventions
- First-level header (optional)
- Content description (intro) in its own box
- Content as dynamically generated folder tree (in its own box)
Page resource
Visible Conventions
- First-level header (optional)
- Content (with its own border)
- Last-modified date
URL resource
Visible Conventions
- First-level header
- Either embedded object presenting HTML content at URL or link to URL
- Content description/intro (in border)
Assignment Activity
Visible Conventions
- Strangely, there is no header for the student views for this activity
- Assignment description/intro
- Student submission (identified in 2 cases by ID, #online, #userfiles, and in 1 case by classname, .files)
- Add submission/Upload file/Edit submission button (changes with existing submissions)
- Header *Notes* and a boxed .no-overflow container for student-entered notes (notes content is not identified by a specific ID or classname)
Chat activity
Visible Conventions
- Content header
- Activity description/info
- #enterlink.generalbox which contains several links to different views/launch chat itself
- .generalbox with options to view/delete a session (delete may be only an admin option)
- Date and text of chat transcript, unwrapped
Choice activity
Visible Conventions
- *No* header to choice view on standard landing page
- Form element with choice options and submit button
- Header preceding table presenting results
- Table containing results
- table.results.anonymous
- table.results.names
Database activity
Visible Conventions
- List of entries
- Single entry
- Activity header (visible on *View list* and *Search* tabs but not others)
- .tabtree tabs for access if different views/functionality
- .defaulttemplate entry items (no wrapper around the collection), .defaulttemplate class is used on both list view and single view
- div.paging containing links to additional pages within the view (for both list and single view)
- Search fields for each element of database entries, as well as author firstname and author lastname, provided by Search view
- On List view, div.datapreferences form which allows user to alter number of entries shown and organization of entries, also includes search input
- New entry form including:
- Header
- Form elements as determined by template
- Buttons for Save and View, Save and Add Another
Forum activity
Visible Conventions
- div#intro.generalbox for activity intro/description
- div.forumaddnew containing form element for adding a new discussion thread
- div.paging for providing an index of multi-page listings of topics
- table.forumheaderlist contains all forum threads, some metadata
- div.discussioncontrols alters organization of discussion threads
- div.forumpost
- div.header, contains picture, header, author, and date
- div.maincontent, contains post content
- div.side, contains .left spacer element and control options for editing, deleting, and rating
Glossary activity
Visible Concepts
- Similar to database activity, in that the view features a tabbed interface with content below the tabs
- div#intro
- form element, no identifying ID or classname, which provides search funct
- div.glossaryaddentry for adding a new glossary entry
- div.glossarydisplay
- div.tabtree
- div.entrybox
- table.glossarypost contains a single glossary entry, with title, concept, and editing icons--these are very similar in layout and data to an individual forum post and an individual database module entry (each has associated metadata and controls and is displayed in a list view in some cases)
- editing view for adding a new glossary entry (a very basic formslib interface, form elements are grouped, submit buttons @ bottom)
Lesson activity
Visual Conventions
- Single header
- Question, answer options, and submit button are a single form element, though the submit button is not visually grouped with the other elements
- .box.contents content area (with border)
- .answeroption elements follow .box.contents, ungrouped
- .box.ongoing ongoing score element
- .box.branchbuttoncontainer element containing all branch buttons
- progress bar element
Quiz activity
This is inarguably the most complex of the modules I've looked at so far.
Visible Conventions
- Landing page - view.php presents a landing page. If the learner already has completed attempts, a table of those attempts is also displayed.
- h2.main heading with module title
- div#intro intro/description text in
- div.quizinfo with info about quiz settings (as relevant to learner)
- h2.main heading "Summary of Quiz Attempts" (same hierarchy header as activity title)
- table.quizattemptsummary if applicable, presents learner with table of attempts
- div#feedback displays scoring information, feedback
- div.quizattempt contains form with input element to start attempt
- startattempt.php
- displayed in the event that password is required
- div#intro displayed again (user is not always shown this screen)
- form element with text field for password entry, Continue, and Cancel buttons (in the event that a password is required)
- attempt.php
- form element containing questions
- div.que (ID gives question number, addl classes tell question type & assessment mode)
- div.info - float:left, question metadata displayed: question metadata, question edit link, question flag option
- div.content - question content, form elements for responses, "Check" button for immediate answer checking, and .im-feedback presenting feedback from that immediate check
- div.que (ID gives question number, addl classes tell question type & assessment mode)
- form element containing questions
- summary.php
- h2.main quiz header
- h3.main "Summary of attempt
- table.quizsummaryofattempt displays results for each question in this attempt
- div.submitbtns displays *Submit all and finish* btn to complete attempt
- review.php
- table.quizreviewsummary, presented on first page of review only
- div.info
- div.content - .content contains slightly different elements in order to show per-question remediation
- div.submitbtns contains a link instead of a button, as with the live quiz attempt, can read *Next >* or *Finish Review*
SCORM activity
Visual Conventions
- view.php - there is a settings option for students to skip this view entirely
- h2.main with activity title
- div#intro with activity description
- div.generalbox which displays the content structure of the scorm package
- div.scorm-center - contains buttons to player.php/start scorm session and *Start new attempt* checkbox
- player.php
- .altfinishlink, displayed when the scorm activity has launched in a new window
- div#scormpage containing scorm nav and player (highly specialized and probably not the prime target of a standardization effort)
Survey activity
Visible Conventions
- view.php
- Some variation with different surveys but these are the basic conventions
- div#intro
- bare div with instructions "All questions are required and must be answered"
- Individual questions in table elements
- input "Click here to continue"
- view.php if learner has completed survey
- two h2.main with learner completion information
- div.resultgraph displaying survey results
- save.php
- div#notice
- div.continuebutton
Wiki activity
Visible Conventions
- view.php
- div#info.generalbox
- div.tabtree navigation tabs
- div.wiki_right - div containing *Printer-friendly version* link
- h2.wiki_headingtitle - this serves the purpose of the h2.main on other pages, and might be placed above the div#info.generalbox as activity title. That is what is printed here: the activity title.
- div.generalbox div.text_to_html presenting rendered content
- edit.php
- div#info.generalbox
- div.tabtree navigation tabs
- h2.wiki_headingtitle - this serves the purpose of the h2.main on other pages, and might be placed above the div#info.generalbox as activity title. That is what is printed here: the activity title.
- form element (no wrapper) with HTMLeditor, tags, and button fieldsets
- comments.php
- div#info.generalbox
- div.tabtree navigation tabs
- h2.wiki_headingtitle - this serves the purpose of the h2.main on other pages, and might be placed above the div#info.generalbox as activity title. That is what is printed here: the activity title.
- div.midpad - with centered link *Add comment*
- table.generaltable presenting individual comments with metadata
- history.php
- div#info.generalbox
- div.tabtree navigation tabs
- h2.wiki_headingtitle - this serves the purpose of the h2.main on other pages, and might be placed above the div#info.generalbox as activity title. That is what is printed here: the activity title.
- h4.wiki_headingtime - small caps italics presenting last edited time (this is not a header application as markup implies)
- form#diff containing table with history, diffs
- h2.main used on page views presenting diffs only
- div.wiki-diff-container - div containing diff views
- div.wiki-diff-paging - div containing pagination and links for diff views
- map.php
- div#info.generalbox
- div.tabtree navigation tabs
- h2.wiki_headingtitle - this serves the purpose of the h2.main on other pages, and might be placed above the div#info.generalbox as activity title. That is what is printed here: the activity title.
- div.midpad - with centered drop-down select
- table.wiki_editor.generalbox with results of dropdown selection displayed
- files.php
- div#info.generalbox
- div.tabtree navigation tabs
- div.generalbox containing wiki files tree
Workshop activity
I'm skipping this last activity because from what I see it is very similar in presentation to activities I've already covered. Further, I have very little experience with the workshop, and won't know where obscure views are.