{"id":5217,"date":"2020-06-10T06:43:55","date_gmt":"2020-06-10T06:43:55","guid":{"rendered":"http:\/\/www.appsgeyser.com\/blog\/?p=5217"},"modified":"2021-06-01T09:49:14","modified_gmt":"2021-06-01T09:49:14","slug":"customized-code-quiz-template-customization-add-theme","status":"publish","type":"post","link":"https:\/\/appsgeyser.com\/blog\/customized-code-quiz-template-customization-add-theme\/","title":{"rendered":"Customized Code – Quiz Template Customization: Add Your Own Theme"},"content":{"rendered":"\n

Today’s code is something a little different. It is focusing upon the quiz template only. If you are looking at adding some color to personalize your app to suit your branding, then add this code into your app. In order to add this customized code, go to your AppsGeyser dashboard, click on ‘Edit’<\/em><\/strong> and go to the ‘Advanced Edit<\/strong><\/em> ‘page. Add the code at the bottom of  the \u2018Advanced Edit\u2019 <\/i><\/b> tab.<\/p>\n\n\n\n

Today’s code will help you add your branding needs to your quiz.<\/p>\n\n\n\n


\nvar colors = [\"BurlyWood\", \"LightGreen\", \"LightPink\"]; \/* Enter a list of colors<\/span> *\/
\nvar themeWrapper=document.createElement(\"div\");
\nthemeWrapper.style.position=\"absolute\";
\nthemeWrapper.style.width=\"100%\";
\nthemeWrapper.style.bottom=\"10px\";
\nvar themeBlock=document.createElement(\"div\");
\nthemeBlock.setAttribute(\"class\",\"start_button\");
\nthemeBlock.style.width=\"25%\";
\nvar themeText= document.createTextNode(\"Theme\");
\nthemeBlock.appendChild(themeText);
\nthemeWrapper.appendChild(themeBlock);
\ndocument.getElementById(\"intro_screen\").appendChild(themeWrapper);
\nvar state =1;
\nfunction changeTheme(color){
\ndocument.getElementById(\"intro_screen\").style.backgroundImage='none';
\ndocument.getElementsByTagName(\"html\")[0].style.backgroundImage='none';
\ndocument.getElementById(\"intro_screen\").style.backgroundColor=color;
\ndocument.getElementsByTagName(\"html\")[0].style.backgroundColor=color;
\n}
\nvar i = 0;
\nthemeBlock.onclick=function(){
\ni = i + 1;
\ni = i % colors.length;
\nchangeTheme(colors[i]);
\n};
\n<\/code>
To upload the code, please click on’Edit’<\/em><\/strong>.<\/p>\n\n\n\n

\"edit<\/figure><\/div>\n\n\n\n

Then click on ‘Advanced Edit’<\/em><\/strong>.<\/p>\n\n\n\n

\"free<\/a>
Choose Edit app to edit your free android app.<\/figcaption><\/figure><\/div>\n\n\n\n

Scroll to the bottom and add in your customized code.<\/p>\n\n\n\n

\"embed<\/a><\/figure><\/div>\n\n\n\n

This is what the app will look like before and after:<\/p>\n\n\n\n

\"Customized<\/a>
Customized Code – Image before code<\/figcaption><\/figure><\/div>\n\n\n\n
\"Customized<\/a>
Customized Code – Image after code<\/figcaption><\/figure><\/div>\n\n\n\n

 <\/a><\/p>\n\n\n\n

We wish you the best of luck with your app, and hope that you enjoy adding in customized code to your app.<\/p>\n\n\n\n

Appsgeyser will be adding more codes over the coming few weeks. Don’t forget to come back and learn some more.<\/p>\n\n\n\n

*codes are not available on every template. Please check the advanced edit section to see if the coding area is open. Today’s code is for the QUIZ template only<\/p>\n","protected":false},"excerpt":{"rendered":"

Today’s code is something a little different. It is focusing upon the quiz template only. If you are looking at adding some color to personalize your app to suit your branding, then add this code into your app. In order to add this customized code, go to your AppsGeyser dashboard, click on ‘Edit’ and go to the ‘Advanced Edit ‘page. Add the code at the bottom of  the \u2018Advanced Edit\u2019 tab. Today’s code will help you add your branding needs to your quiz. var colors = ; \/* Enter a list of colors *\/ var themeWrapper=document.createElement(“div”); themeWrapper.style.position=”absolute”; themeWrapper.style.width=”100%”; themeWrapper.style.bottom=”10px”; var <\/p>\n","protected":false},"author":2,"featured_media":0,"comment_status":"closed","ping_status":"open","sticky":false,"template":"","format":"standard","meta":[],"categories":[1296,703],"tags":[],"_links":{"self":[{"href":"https:\/\/appsgeyser.com\/blog\/wp-json\/wp\/v2\/posts\/5217"}],"collection":[{"href":"https:\/\/appsgeyser.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/appsgeyser.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/appsgeyser.com\/blog\/wp-json\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"https:\/\/appsgeyser.com\/blog\/wp-json\/wp\/v2\/comments?post=5217"}],"version-history":[{"count":7,"href":"https:\/\/appsgeyser.com\/blog\/wp-json\/wp\/v2\/posts\/5217\/revisions"}],"predecessor-version":[{"id":15156,"href":"https:\/\/appsgeyser.com\/blog\/wp-json\/wp\/v2\/posts\/5217\/revisions\/15156"}],"wp:attachment":[{"href":"https:\/\/appsgeyser.com\/blog\/wp-json\/wp\/v2\/media?parent=5217"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/appsgeyser.com\/blog\/wp-json\/wp\/v2\/categories?post=5217"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/appsgeyser.com\/blog\/wp-json\/wp\/v2\/tags?post=5217"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}