function readOnly(count){ }
Sign Up ›
Starting November 20, the site will be set to read-only. On December 4, 2023,
forum discussions will move to the Trailblazer Community.
Learn More

Browse by Topic
ShowAll Questionssorted byDate Posted
+ Start a Discussion
Tarun DasTarun Das 

Problems while trying to rewrite the existing quiz page content of webpage using lightning

I am trying to rewrite the quiz page content of webpage as shown in picture where user selects a question using radio button attached with salesforce lightning ,but i am facing below challenges

1)How to bring the entire content of to center of page ,currently its aligned at left top corner of page here is my cmp page code
<aura:component > <h1>How Much Weight You Want To Loose</h1> <aura:attribute name="options" type="List" default="[ {'label': 'Not Sure', 'value': 'option1'}, {'label': 'Greater Than 40 lb', 'value': 'option2'}, {'label': 'Less Than lb', 'value': 'option2'}, {'label': 'Will Decide Later', 'value': 'option2'}, ]"/> <aura:attribute name="value" type="String" default="option1"/> <lightning:radioGroup name="radioGroup" label="Select Your Option Then Click Next" options="{! v.options }" value="{! v.value }" type="radio"/> </aura:component>

2)How do i include next button in bottom of my above lightning component

existing quiz pageRegards, Tarun
Khan AnasKhan Anas (Salesforce Developers) 
Hi Tarun,

Greetings to you!

You can use slds-align_absolute-center
Please try the below code:
  
<aura:component >  
    <aura:attribute name="options" 
                    type="List" 
                    default="[ {'label': 'Not Sure', 'value': 'option1'}, 
                             {'label': 'Greater Than 40 lb', 'value': 'option2'}, 
                             {'label': 'Less Than lb', 'value': 'option2'}, 
                             {'label': 'Will Decide Later', 'value': 'option2'}, ]"/> 
    <aura:attribute name="value" 
                    type="String" 
                    default="option1"/> 
    
    <div class="slds-align_absolute-center" >
        <h1>How Much Weight You Want To Loose</h1>
    </div>
    <br/>
    <div class="slds-align_absolute-center" >
        <lightning:radioGroup name="radioGroup" 
                              label="Select Your Option Then Click Next" 
                              options="{! v.options }" 
                              value="{! v.value }" 
                              type="radio"/> 
    </div>
    <br/>
    <div class="slds-align_absolute-center" >
        <lightning:button label="Previous"
                          iconName="utility:left"
                          iconPosition="left"
                          variant="brand"
                          onclick="{!c.prevPage}"/>
        <lightning:button label="Next"
                          iconName="utility:right"
                          iconPosition="right"
                          variant="brand"
                          onclick="{!c.nextPage}"/>
    </div>
</aura:component>

I hope it helps you.

Kindly let me know if it helps you and close your query by marking it as solved so that it can help others in the future. It will help to keep this community clean.

Thanks and Regards,
Khan Anas
Tarun DasTarun Das
Hi Anas,

Thanks for response and sorry for delayed reply,unfortunately buttons seems distorted,here is o/p

Current salesforce page
Khan AnasKhan Anas (Salesforce Developers) 
You need to extend force:slds in the application. The Salesforce Lightning Design System provides a look and feel that’s consistent with Lightning Experience. Your application automatically gets Lightning Design System styles and design tokens if it extends force:slds. 

To extend force:slds: 
<aura:application extends="force:slds">
    <c:Your_Component_Name />
</aura:application>

Regards,
Khan Anas