Display Format Examples 1

By KF Cheng on Thu, 2022-02-10
Privacy Setting
Public
This is a demonstration of how the information provided can be formatted and structured on web.

 

 

Content

  1. Admission
  2. Graduation
  3. Academic Performance
  4. Learning Outcomes
  5. Assessment of Performance
  6. Seven Attributes
  7. SFQ
  8. Institutional Surveys

 

 

 

 

 

 

 

FAQ

Morbi tristique senectus et netus et malesuada fames. Semper feugiat nibh sed pulvinar proin gravida. Arcu, non sodales neque sodales ut etiam sit. Magna eget est lorem ipsum dolor sit amet, consectetur. Sed ullamcorper morbi tincidunt ornare. Platea dictumst vestibulum rhoncus est pellentesque elit ullamcorper dignissim. Posuere ac ut consequat semper viverra nam libero justo. Arcu dictum varius duis at consectetur.

 

Condimentum lacinia quis vel eros donec ac odio. Vitae congue eu, consequat ac. Urna, porttitor rhoncus dolor purus non enim praesent. Velit egestas dui, id ornare. Pellentesque adipiscing commodo elit, at imperdiet dui accumsan sit. Enim nec dui nunc mattis enim ut. Vulputate sapien nec sagittis aliquam malesuada bibendum. Quam pellentesque nec nam aliquam. Facilisi nullam vehicula ipsum a arcu. Vitae, auctor eu augue ut lectus.

 

Nisl suscipit adipiscing bibendum est. Varius sit amet, mattis vulputate enim nulla. In tellus integer feugiat scelerisque. Vel facilisis volutpat, est velit egestas. Posuere sollicitudin aliquam ultrices sagittis orci, a. Aliquam etiam erat velit, scelerisque in dictum. Bibendum at varius vel, pharetra vel turpis. Fermentum, odio eu feugiat pretium, nibh.

 

Sit amet mauris commodo quis imperdiet. Fringilla ut morbi tincidunt augue interdum velit euismod. Massa tincidunt dui ut ornare lectus sit amet est. Magna fringilla urna, porttitor rhoncus. Consequat ac felis donec et odio pellentesque diam volutpat. Iaculis eu non diam phasellus vestibulum. Eget est lorem ipsum dolor sit amet, consectetur adipiscing. Diam sollicitudin tempor id eu nisl. Aliquet nibh praesent tristique magna. Et, sollicitudin ac orci phasellus egestas. Quam id leo in vitae.

 

 

Preferred Subject
Mathematics
Biology
Chemistry
Combined Science: Biology + Chemistry
Combined Science: Biology + Physics
Combined Science: Physics + Chemistry

 

 

 

Preferred Subject
Mathematics
Biology
Chemistry
Combined Science: Biology + Chemistry
Combined Science: Biology + Physics
Combined Science: Physics + Chemistry

 

 

 

Preferred Subject
Mathematics
Biology
Chemistry
Combined Science: Biology + Chemistry
Combined Science: Biology + Physics
Combined Science: Physics + Chemistry

 

 

3 codesets are tested and all working fine.

Features include

  • Display of chart each in JPG format.  There are a total of 3 chart images, one for each year.
  • Bottom button to select which year-chart to display
  • A colorbox effect (pop-up) when clicking on the image so that it can be viewed with a larger screen

 

 

 

Using JQuery & Bootstrap

 

 

This is a demonstration of creating tabs inside a editable area.  It will be much easier for content creator because they don't need to work at code level.  In this system, there is an in-built tabs with the editor.

 
 

 

 

 

Below content is a demonstration of:

  • DropCap in the first apragraph - First letter enlarged
  • tooltip on a few underlined words in each paragraph, which will appear when 'mouse-over'

 

 

Facilisis magna etiam tempor, orci eu lobortis. Mattis nunc, sed blandit libero volutpat. Vitae, semper quis lectus nulla at volutpat diam ut. Ultricies lacus sed turpis tincidunt id aliquet risus. Massa tincidunt nunc pulvinar sapien et ligula ullamcorper. Amet, consectetur adipiscing elit pellentesque. Integer quis auctor elit sed vulputate mi. Adipiscing elit ut aliquam, purus sit amet. Platea dictumst quisque sagittis, purus sit. Vulputate enim nulla aliquet porttitor. Molestie at elementum eu, facilisis sed odio morbi. Id volutpat lacus laoreet non curabitur. Suspendisse potenti nullam ac tortor vitae purus faucibus ornare. Lacus sed turpis tincidunt id aliquet risus feugiat. Nunc vel risus commodo viverra maecenas accumsan, lacus.

Massa, eget egestas purus viverra accumsan in nisl. Cursus sit amet, dictum sit amet justo donec. Proin nibh nisl, condimentum id. Sit amet, mattis vulputate enim nulla aliquet porttitor. Suspendisse faucibus interdum posuere lorem ipsum. Ultrices sagittis orci, a scelerisque purus. At tellus at urna condimentum mattis pellentesque id nibh. Nisi porta lorem mollis aliquam ut porttitor. Nibh sit amet commodo nulla facilisi nullam vehicula. Pharetra sit amet, aliquam id diam. Diam maecenas ultricies mi eget mauris. Metus, dictum at tempor commodo. Neque egestas congue quisque egestas diam in arcu cursus. Sollicitudin nibh sit amet commodo nulla facilisi nullam vehicula. Volutpat commodo sed egestas egestas. Laoreet sit amet cursus sit amet, dictum. Platea dictumst quisque sagittis, purus sit amet volutpat consequat. Libero justo, laoreet sit amet cursus. Quisque egestas diam in arcu cursus euismod quis viverra.

Arcu dictum varius duis at consectetur. In est ante in nibh mauris, cursus. Malesuada nunc vel risus commodo. Porttitor eget dolor morbi non arcu. Tincidunt vitae, semper quis lectus nulla at volutpat diam. Id diam vel quam elementum pulvinar etiam. Eget nulla facilisi etiam dignissim. Feugiat in fermentum posuere urna nec tincidunt praesent semper. Tempor id eu nisl nunc mi ipsum, faucibus. Habitasse platea dictumst vestibulum rhoncus est. Vehicula ipsum a arcu cursus vitae congue mauris rhoncus. Semper quis lectus nulla at volutpat diam ut venenatis. Varius quam quisque id diam vel quam elementum. Varius quam quisque id diam vel. Ullamcorper velit sed ullamcorper morbi tincidunt ornare massa.

 

 

 

Tooltip Example

The data-placement attribute specifies the tooltip position.

Top Bottom Left Right

By uploading an image, and using its storage location as a hyperlink, it can easily result in a pop-up picture.  Click on the following red text to try.  Note that this is on-click, not mouse-over.

 

Erat imperdiet sed euismod nisi. Facilisi morbi tempus iaculis urna, id volutpat lacus. Et magnis dis parturient montes, nascetur ridiculus mus. Please click here.  Velit dignissim sodales ut eu sem integer. Nisi, scelerisque eu ultrices vitae, auctor. Viverra mauris, in aliquam sem fringilla ut morbi. Molestie ac, feugiat sed lectus vestibulum mattis. At ultrices mi tempus imperdiet nulla malesuada pellentesque elit. Sit amet est placerat in egestas erat. Ultricies mi eget mauris pharetra et ultrices.

Euismod lacinia at quis risus sed vulputate odio. Dignissim diam quis enim lobortis. Proin fermentum leo vel orci porta non. Interdum velit laoreet id donec ultrices. Elit sed vulputate mi sit amet. Diam sit amet nisl suscipit adipiscing bibendum est. Vel turpis nunc eget lorem. Pharetra pharetra, massa massa ultricies mi, quis hendrerit. Consectetur purus ut faucibus pulvinar elementum integer enim neque. Est placerat in egestas erat. Sed pulvinar proin gravida hendrerit lectus a. Velit laoreet id donec ultrices tincidunt arcu. Dignissim enim, sit amet venenatis urna. Turpis nunc eget lorem dolor, sed. Sed tempus, urna et pharetra pharetra, massa massa. Fermentum iaculis eu non diam.