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
Line 98: Line 98:
==Database activity==
==Database activity==
===Visible Conventions===
===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-database-activity.png|600x400px|thumb|border|center|List view, learner landing page of database activity]]

Revision as of 19:35, 8 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

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

Glossary activity

Lesson activity

Quiz activity

SCORM activity

Survey activity

Wiki activity

Workshop activity