Note:

If you want to create a new page for developers, you should create it on the Moodle Developer Resource site.

Survey of existing page views and markup: Difference between revisions

From MoodleDocs
 
(24 intermediate revisions by the same user not shown)
Line 193: Line 193:
*** div.que (ID gives question number, addl classes tell question type & assessment mode)
*** 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.info - float:left, question metadata displayed: question metadata, question edit link, question flag option
**** div.content - question content, form elements for responses, and "Check" button if necessary
**** 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*




Line 213: Line 223:


==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"


Screenshot of file resource view for a non-image, embedded file
Screenshot of file resource view for a non-image, embedded file, with *Display resource name* setting enabled

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)


Screenshot of folder resource view

Page resource

Visible Conventions

  • First-level header (optional)
  • Content (with its own border)
  • Last-modified date


Screenshot of page resource view

URL resource

Visible Conventions

  • First-level header
  • Either embedded object presenting HTML content at URL or link to URL
  • Content description/intro (in border)


Screenshot of URL resource view

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)
Screenshot of offline assignment activity
Screenshot of online text assignment activity
Screenshot of single upload assignment activity
Screenshot of advanced upload assignment activity

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
Landing page of chat activity
List of chat sessions chat activity
Individual session transcript chat activity

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
Learner landing page of choice activity, no option selected
Results choice activity
Anonymous results choice activity

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
List view, learner landing page of database activity
List view, learner landing page of choice activity, learner has editing options bc these are the learner's entries
Learner landing page of choice activity, no option selected
Learner landing page of choice activity, no option selected
Learner landing page of choice activity, no option selected

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
Discussion thread table, forum activity
A single forum thread
Add post, single forum thread

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)
Basic list view of entries, glossary activity
Add a new entry, glossary 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
lesson-1-activity.png
lesson-2-add-entry-activity.png
lesson-3-add-entry-activity.png
lesson-4-add-entry-activity.png

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*


quiz-1.png
quiz-2.png
quiz-3.png
quiz-4.png
quiz5.png
quiz-6.png
quiz-7.png
quiz-8.png

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)
scorm-1.png
scorm-2.png
scorm-3.png

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


survey-1.png
survey-2.png
survey-resultgraph.png

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


wiki-1.png
wiki-2.png
wiki-3.png
wiki-4.png
wiki-5.png
wiki-6.png
wiki-7.png
wiki-diff.png

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.