Customized Code – Quiz Template Customization: Add Your Own Theme

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 ‘Advanced Edit’ tab.

Today’s code will help you add your branding needs to your quiz.


var colors = ["BurlyWood", "LightGreen", "LightPink"]; /* Enter a list of colors */
var themeWrapper=document.createElement("div");
themeWrapper.style.position="absolute";
themeWrapper.style.width="100%";
themeWrapper.style.bottom="10px";
var themeBlock=document.createElement("div");
themeBlock.setAttribute("class","start_button");
themeBlock.style.width="25%";
var themeText= document.createTextNode("Theme");
themeBlock.appendChild(themeText);
themeWrapper.appendChild(themeBlock);
document.getElementById("intro_screen").appendChild(themeWrapper);
var state =1;
function changeTheme(color){
document.getElementById("intro_screen").style.backgroundImage='none';
document.getElementsByTagName("html")[0].style.backgroundImage='none';
document.getElementById("intro_screen").style.backgroundColor=color;
document.getElementsByTagName("html")[0].style.backgroundColor=color;
}
var i = 0;
themeBlock.onclick=function(){
i = i + 1;
i = i % colors.length;
changeTheme(colors[i]);
};

To upload the code, please click on’Edit’.

edit free android app

Then click on ‘Advanced Edit’.

free android app
Choose Edit app to edit your free android app.

Scroll to the bottom and add in your customized code.

embed code

This is what the app will look like before and after:

Customized Code
Customized Code – Image before code
Customized Code
Customized Code – Image after code

 

We wish you the best of luck with your app, and hope that you enjoy adding in customized code to your app.

Appsgeyser will be adding more codes over the coming few weeks. Don’t forget to come back and learn some more.

*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