{"id":2284,"date":"2016-11-08T02:53:43","date_gmt":"2016-11-08T02:53:43","guid":{"rendered":"http:\/\/www.blog.microworkers.com\/?p=2284"},"modified":"2016-11-13T22:53:00","modified_gmt":"2016-11-13T22:53:00","slug":"ttv-tutorial-setting-up-template-with-accordion","status":"publish","type":"post","link":"https:\/\/www.microworkers.com\/blog\/ttv-tutorial-setting-up-template-with-accordion\/","title":{"rendered":"TTV Tutorial: Setting up Template with Accordion"},"content":{"rendered":"

In our previous Tutorials, we explained how to set up different Templates for varying specialized requirements. In this post we\u2019re going to highlight creation of Template containing multiple pages.<\/p>\n

You may find this approach in our recently launched TTV: MW Admission Test.<\/strong><\/p>\n

For such task we have a CSV (Comma Separated Values) spreadsheet listing all the Test Questions and their corresponding Multiple Choice Answers. Please refer to our previous post<\/strong><\/a> on Ensuring CSV Format Compliance in Campaign Setup.<\/p>\n

Below you can find screen-capture of the template, broken down into sections, as well as their corresponding html codes:<\/p>\n

 <\/p>\n

Pre-Test:<\/p>\n

\"templ_faq1\"<\/a><\/p>\n

 <\/p>\n

(Click on image to enlarge, and use the + option if necessary)<\/em><\/span><\/p>\n

\"templ_faq1_a\"<\/a><\/p>\n

 <\/p>\n

(Click on image to enlarge, and use the + option if necessary)<\/em><\/span><\/p>\n

\"templ_faq1_b\"<\/a><\/p>\n

\"templ_faq2\"<\/a><\/p>\n

 <\/p>\n

(Click on image to enlarge, and use the + option if necessary)<\/em><\/span><\/p>\n

 <\/p>\n

\"templ_faq2_b\"<\/a><\/p>\n

 <\/p>\n

Level 1:<\/p>\n

 <\/p>\n

\"templ_faq3\"<\/a><\/p>\n

 <\/p>\n

(Click on image to enlarge, and use the + option if necessary)<\/em><\/span><\/p>\n

 <\/p>\n

\"templ_faq3_a\"<\/a><\/p>\n

 <\/p>\n

Level 2:<\/p>\n

 <\/p>\n

\"templ_faq4\"<\/a><\/p>\n

 <\/p>\n

(Click on image to enlarge, and use the + option if necessary)<\/em><\/span><\/p>\n

\"templ_faq4_a\"<\/a><\/p>\n

You would notice that each exam level is displayed in a different page. This is done using Accordion and Collapse functions. Accordions are amazing content management tools especially in approaches like this. When you have a page that\u2019s broken into dozens of topics or several blocks of content, or in this case – an exam split into several levels where content of each level is to be exposed in a progressive manner – accordion menus can provide a manageable layout solution. Collapsing the accordions allows you to display only a few key pieces of content on a single page. It minimizes excessive scrolling and gives users an overview of the content available on the page.<\/p>\n

You will find helpful hints on using accordion and collapse functions on Bootstraps on the ff links:<\/p>\n

http:\/\/www.w3schools.com\/Bootstrap\/bootstrap_collapse.asp<\/a>
\nhttp:\/\/www.w3schools.com\/howto\/howto_js_accordion.asp<\/a>
\nhttp:\/\/www.w3schools.com\/Bootstrap\/bootstrap_collapse.asp<\/a><\/p>\n

Meanwhile, to see more of TTV Template Tutorials, feel free to explore this page:<\/p>\n

https:\/\/www.microworkers.com\/blog\/category\/tutorials\/<\/a><\/p>\n","protected":false},"excerpt":{"rendered":"

In our previous Tutorials, we explained how to set up different Templates for varying specialized requirements. In this post we\u2019re going to highlight creation of Template containing multiple pages. You may find this approach in our recently launched TTV: MW Admission Test. For such task we have a CSV (Comma Separated Values) spreadsheet listing all […]<\/p>\n","protected":false},"author":2,"featured_media":0,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[12],"tags":[],"class_list":["post-2284","post","type-post","status-publish","format-standard","hentry","category-tutorials"],"yoast_head":"\nTTV Tutorial: Setting up Template with Accordion - MicroWorkers<\/title>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/www.microworkers.com\/blog\/ttv-tutorial-setting-up-template-with-accordion\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"TTV Tutorial: Setting up Template with Accordion - MicroWorkers\" \/>\n<meta property=\"og:description\" content=\"In our previous Tutorials, we explained how to set up different Templates for varying specialized requirements. In this post we\u2019re going to highlight creation of Template containing multiple pages. You may find this approach in our recently launched TTV: MW Admission Test. For such task we have a CSV (Comma Separated Values) spreadsheet listing all […]\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.microworkers.com\/blog\/ttv-tutorial-setting-up-template-with-accordion\/\" \/>\n<meta property=\"og:site_name\" content=\"MicroWorkers\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/microworkerscom\/\" \/>\n<meta property=\"article:published_time\" content=\"2016-11-08T02:53:43+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2016-11-13T22:53:00+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/www.microworkers.com\/blog\/wp-content\/uploads\/2016\/11\/templ_faq1.png\" \/>\n<meta name=\"author\" content=\"Patricia\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:creator\" content=\"@microworkers\" \/>\n<meta name=\"twitter:site\" content=\"@microworkers\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"Patricia\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"2 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\\\/\\\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\\\/\\\/www.microworkers.com\\\/blog\\\/ttv-tutorial-setting-up-template-with-accordion\\\/#article\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/www.microworkers.com\\\/blog\\\/ttv-tutorial-setting-up-template-with-accordion\\\/\"},\"author\":{\"name\":\"Patricia\",\"@id\":\"https:\\\/\\\/www.microworkers.com\\\/#\\\/schema\\\/person\\\/0c62ccbf6f27ab104ed26abf65a9279c\"},\"headline\":\"TTV Tutorial: Setting up Template with Accordion\",\"datePublished\":\"2016-11-08T02:53:43+00:00\",\"dateModified\":\"2016-11-13T22:53:00+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\\\/\\\/www.microworkers.com\\\/blog\\\/ttv-tutorial-setting-up-template-with-accordion\\\/\"},\"wordCount\":357,\"commentCount\":0,\"publisher\":{\"@id\":\"https:\\\/\\\/www.microworkers.com\\\/#organization\"},\"image\":{\"@id\":\"https:\\\/\\\/www.microworkers.com\\\/blog\\\/ttv-tutorial-setting-up-template-with-accordion\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/www.microworkers.com\\\/blog\\\/wp-content\\\/uploads\\\/2016\\\/11\\\/templ_faq1.png\",\"articleSection\":[\"Tutorials\"],\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\\\/\\\/www.microworkers.com\\\/blog\\\/ttv-tutorial-setting-up-template-with-accordion\\\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\\\/\\\/www.microworkers.com\\\/blog\\\/ttv-tutorial-setting-up-template-with-accordion\\\/\",\"url\":\"https:\\\/\\\/www.microworkers.com\\\/blog\\\/ttv-tutorial-setting-up-template-with-accordion\\\/\",\"name\":\"TTV Tutorial: Setting up Template with Accordion - MicroWorkers\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/www.microworkers.com\\\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\\\/\\\/www.microworkers.com\\\/blog\\\/ttv-tutorial-setting-up-template-with-accordion\\\/#primaryimage\"},\"image\":{\"@id\":\"https:\\\/\\\/www.microworkers.com\\\/blog\\\/ttv-tutorial-setting-up-template-with-accordion\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/www.microworkers.com\\\/blog\\\/wp-content\\\/uploads\\\/2016\\\/11\\\/templ_faq1.png\",\"datePublished\":\"2016-11-08T02:53:43+00:00\",\"dateModified\":\"2016-11-13T22:53:00+00:00\",\"breadcrumb\":{\"@id\":\"https:\\\/\\\/www.microworkers.com\\\/blog\\\/ttv-tutorial-setting-up-template-with-accordion\\\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\\\/\\\/www.microworkers.com\\\/blog\\\/ttv-tutorial-setting-up-template-with-accordion\\\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/www.microworkers.com\\\/blog\\\/ttv-tutorial-setting-up-template-with-accordion\\\/#primaryimage\",\"url\":\"https:\\\/\\\/www.microworkers.com\\\/blog\\\/wp-content\\\/uploads\\\/2016\\\/11\\\/templ_faq1.png\",\"contentUrl\":\"https:\\\/\\\/www.microworkers.com\\\/blog\\\/wp-content\\\/uploads\\\/2016\\\/11\\\/templ_faq1.png\",\"width\":867,\"height\":1157},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\\\/\\\/www.microworkers.com\\\/blog\\\/ttv-tutorial-setting-up-template-with-accordion\\\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\\\/\\\/www.microworkers.com\\\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"TTV Tutorial: Setting up Template with Accordion\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\\\/\\\/www.microworkers.com\\\/#website\",\"url\":\"https:\\\/\\\/www.microworkers.com\\\/\",\"name\":\"MicroWorkers\",\"description\":\"The Official Blog\",\"publisher\":{\"@id\":\"https:\\\/\\\/www.microworkers.com\\\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\\\/\\\/www.microworkers.com\\\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"},{\"@type\":\"Organization\",\"@id\":\"https:\\\/\\\/www.microworkers.com\\\/#organization\",\"name\":\"Microworkers\",\"url\":\"https:\\\/\\\/www.microworkers.com\\\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/www.microworkers.com\\\/#\\\/schema\\\/logo\\\/image\\\/\",\"url\":\"https:\\\/\\\/www.microworkers.com\\\/blog\\\/wp-content\\\/uploads\\\/2019\\\/04\\\/logo505.png\",\"contentUrl\":\"https:\\\/\\\/www.microworkers.com\\\/blog\\\/wp-content\\\/uploads\\\/2019\\\/04\\\/logo505.png\",\"width\":387,\"height\":56,\"caption\":\"Microworkers\"},\"image\":{\"@id\":\"https:\\\/\\\/www.microworkers.com\\\/#\\\/schema\\\/logo\\\/image\\\/\"},\"sameAs\":[\"https:\\\/\\\/www.facebook.com\\\/microworkerscom\\\/\",\"https:\\\/\\\/x.com\\\/microworkers\"]},{\"@type\":\"Person\",\"@id\":\"https:\\\/\\\/www.microworkers.com\\\/#\\\/schema\\\/person\\\/0c62ccbf6f27ab104ed26abf65a9279c\",\"name\":\"Patricia\",\"url\":\"https:\\\/\\\/www.microworkers.com\\\/blog\\\/author\\\/patty\\\/\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"TTV Tutorial: Setting up Template with Accordion - MicroWorkers","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/www.microworkers.com\/blog\/ttv-tutorial-setting-up-template-with-accordion\/","og_locale":"en_US","og_type":"article","og_title":"TTV Tutorial: Setting up Template with Accordion - MicroWorkers","og_description":"In our previous Tutorials, we explained how to set up different Templates for varying specialized requirements. In this post we\u2019re going to highlight creation of Template containing multiple pages. You may find this approach in our recently launched TTV: MW Admission Test. For such task we have a CSV (Comma Separated Values) spreadsheet listing all […]","og_url":"https:\/\/www.microworkers.com\/blog\/ttv-tutorial-setting-up-template-with-accordion\/","og_site_name":"MicroWorkers","article_publisher":"https:\/\/www.facebook.com\/microworkerscom\/","article_published_time":"2016-11-08T02:53:43+00:00","article_modified_time":"2016-11-13T22:53:00+00:00","og_image":[{"url":"https:\/\/www.microworkers.com\/blog\/wp-content\/uploads\/2016\/11\/templ_faq1.png","type":"","width":"","height":""}],"author":"Patricia","twitter_card":"summary_large_image","twitter_creator":"@microworkers","twitter_site":"@microworkers","twitter_misc":{"Written by":"Patricia","Est. reading time":"2 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/www.microworkers.com\/blog\/ttv-tutorial-setting-up-template-with-accordion\/#article","isPartOf":{"@id":"https:\/\/www.microworkers.com\/blog\/ttv-tutorial-setting-up-template-with-accordion\/"},"author":{"name":"Patricia","@id":"https:\/\/www.microworkers.com\/#\/schema\/person\/0c62ccbf6f27ab104ed26abf65a9279c"},"headline":"TTV Tutorial: Setting up Template with Accordion","datePublished":"2016-11-08T02:53:43+00:00","dateModified":"2016-11-13T22:53:00+00:00","mainEntityOfPage":{"@id":"https:\/\/www.microworkers.com\/blog\/ttv-tutorial-setting-up-template-with-accordion\/"},"wordCount":357,"commentCount":0,"publisher":{"@id":"https:\/\/www.microworkers.com\/#organization"},"image":{"@id":"https:\/\/www.microworkers.com\/blog\/ttv-tutorial-setting-up-template-with-accordion\/#primaryimage"},"thumbnailUrl":"https:\/\/www.microworkers.com\/blog\/wp-content\/uploads\/2016\/11\/templ_faq1.png","articleSection":["Tutorials"],"inLanguage":"en-US","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/www.microworkers.com\/blog\/ttv-tutorial-setting-up-template-with-accordion\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/www.microworkers.com\/blog\/ttv-tutorial-setting-up-template-with-accordion\/","url":"https:\/\/www.microworkers.com\/blog\/ttv-tutorial-setting-up-template-with-accordion\/","name":"TTV Tutorial: Setting up Template with Accordion - MicroWorkers","isPartOf":{"@id":"https:\/\/www.microworkers.com\/#website"},"primaryImageOfPage":{"@id":"https:\/\/www.microworkers.com\/blog\/ttv-tutorial-setting-up-template-with-accordion\/#primaryimage"},"image":{"@id":"https:\/\/www.microworkers.com\/blog\/ttv-tutorial-setting-up-template-with-accordion\/#primaryimage"},"thumbnailUrl":"https:\/\/www.microworkers.com\/blog\/wp-content\/uploads\/2016\/11\/templ_faq1.png","datePublished":"2016-11-08T02:53:43+00:00","dateModified":"2016-11-13T22:53:00+00:00","breadcrumb":{"@id":"https:\/\/www.microworkers.com\/blog\/ttv-tutorial-setting-up-template-with-accordion\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.microworkers.com\/blog\/ttv-tutorial-setting-up-template-with-accordion\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.microworkers.com\/blog\/ttv-tutorial-setting-up-template-with-accordion\/#primaryimage","url":"https:\/\/www.microworkers.com\/blog\/wp-content\/uploads\/2016\/11\/templ_faq1.png","contentUrl":"https:\/\/www.microworkers.com\/blog\/wp-content\/uploads\/2016\/11\/templ_faq1.png","width":867,"height":1157},{"@type":"BreadcrumbList","@id":"https:\/\/www.microworkers.com\/blog\/ttv-tutorial-setting-up-template-with-accordion\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/www.microworkers.com\/"},{"@type":"ListItem","position":2,"name":"TTV Tutorial: Setting up Template with Accordion"}]},{"@type":"WebSite","@id":"https:\/\/www.microworkers.com\/#website","url":"https:\/\/www.microworkers.com\/","name":"MicroWorkers","description":"The Official Blog","publisher":{"@id":"https:\/\/www.microworkers.com\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/www.microworkers.com\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Organization","@id":"https:\/\/www.microworkers.com\/#organization","name":"Microworkers","url":"https:\/\/www.microworkers.com\/","logo":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.microworkers.com\/#\/schema\/logo\/image\/","url":"https:\/\/www.microworkers.com\/blog\/wp-content\/uploads\/2019\/04\/logo505.png","contentUrl":"https:\/\/www.microworkers.com\/blog\/wp-content\/uploads\/2019\/04\/logo505.png","width":387,"height":56,"caption":"Microworkers"},"image":{"@id":"https:\/\/www.microworkers.com\/#\/schema\/logo\/image\/"},"sameAs":["https:\/\/www.facebook.com\/microworkerscom\/","https:\/\/x.com\/microworkers"]},{"@type":"Person","@id":"https:\/\/www.microworkers.com\/#\/schema\/person\/0c62ccbf6f27ab104ed26abf65a9279c","name":"Patricia","url":"https:\/\/www.microworkers.com\/blog\/author\/patty\/"}]}},"_links":{"self":[{"href":"https:\/\/www.microworkers.com\/blog\/wp-json\/wp\/v2\/posts\/2284","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.microworkers.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.microworkers.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.microworkers.com\/blog\/wp-json\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"https:\/\/www.microworkers.com\/blog\/wp-json\/wp\/v2\/comments?post=2284"}],"version-history":[{"count":5,"href":"https:\/\/www.microworkers.com\/blog\/wp-json\/wp\/v2\/posts\/2284\/revisions"}],"predecessor-version":[{"id":2298,"href":"https:\/\/www.microworkers.com\/blog\/wp-json\/wp\/v2\/posts\/2284\/revisions\/2298"}],"wp:attachment":[{"href":"https:\/\/www.microworkers.com\/blog\/wp-json\/wp\/v2\/media?parent=2284"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.microworkers.com\/blog\/wp-json\/wp\/v2\/categories?post=2284"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.microworkers.com\/blog\/wp-json\/wp\/v2\/tags?post=2284"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}