Project: Personality Test Landing Page - Step 7

December 03, 2014 | Project: Personality Test Landing Page, Embedded Ruby, HTML

Majorfinder new nav

Here is the personality landing page on majorfinder: majorfinder.com/personality

You’ll see I changed the buttons around a little so you can’t go into the personality test quite yet. I am still finishing up some of the work on it. It’s been my complete focus right now. I’m getting really excited about it.

Back to the creation of the landing page. I created this page (and majorfinder) in Ruby on Rails 3. I am using the Bootstrap framework (version 2.3).

In Rails an HTML page can have something called embedded ruby in it. All that basically means is that I can pull in information from the database into the page using a special character that looks like this: <%= %>. If you see them below it's because I'm using ruby code embedded into the HTML page.

Here’s the HTML on the landing page:

<div class="blue">
  <div id="discovery">
    <div class="container">
      <div class="discovery-home-header">
        <div class="row">
          <h1>See Which Majors and Careers Match Your Personality</h1>
          <!-- <p>This is no ordinary personality test.</p> -->
          <p>Find that thing that truly satisfies you.</p>
        </div>

        <div class="row">
          <% if current_user %>

            <!-- Hasn't begun personality test -->
            <% if current_discovery_user.progress == 0 %>

              <%= link_to "Explore My Personality (soon!)", "#", class: "button darker-blue big call" %> 

            <!-- Has completed self-guided test -->
            <% elsif current_discovery_user.ei.present? %>
              <%= link_to "See Your Results", results_path, class: "button darker-blue big call" %>
            <!-- Has begun personality test but isn't yet finished -->
            <% elsif current_discovery_user.progress < 100 && current_discovery_user.progress > 0 %>

              <%= link_to "Continue My Personality Test", question_path(@go_to_next_question), class: "button darker-blue big call" %>

            <!-- Completed Personality Test -->
            <% else %>
              <%= link_to "See Your Results", results_path, class: "button darker-blue big call" %>

            <% end %>
          <% else %>
            <%= link_to "Sign Up for Free", main_app.signup_path, class: "button darker-blue big call" %>
          <% end %>
        </div>

        <div class="row your-choice">
          <p id="your-choice">It's your choice.</p>
          <p id="your-choice">Take it or leave it.</p>
        </div>
      </div>

    </div>
  </div>
</div>

<!-- Point #1 -->
<div class="container">
  <div class="row">
    <div class="personality-reality big-spacer">
      <div class="span5">
        <div class="content-wrapper">
          <h4>Reality #1</h4>
          <p>Based on your personality you will naturally enjoy and do well in certain jobs over others.</p>
        </div>
      </div>
      <div class="span7">
        <%= image_tag "browser-1.png" %>
      </div>
    </div>
  </div>
</div>

<!-- Point #2 -->
<div class="container">
  <div class="row">
    <div class="personality-reality big-spacer">
      <div class="span7">
        <%= image_tag "browser-3.png" %>
      </div>
      <div class="span5">
        <div class="content-wrapper">
          <h4>Reality #2</h4>
          <p>You have strengths and weaknesses as part of your personality. Know your strengths and use them. Succeed faster.</p>
        </div>
      </div>
    </div>
  </div>
</div>

<!-- Point #3 -->
<div class="container">
  <div class="row">
    <div class="personality-reality big-spacer">
      <div class="span5">
        <div class="content-wrapper">
          <h4>Reality #3</h4>
          <p>You can <em>and should</em> find a career you love, one you jump out of bed in the morning to do. You don't have to settle for anything less.</p>
        </div>
      </div>
      <div class="span7">
        <%= image_tag "browser-4.png" %>
      </div>
    </div>
  </div>
</div>


<!-- Gray Strip - Call to Action -->
<div id="gray">
  <h3>... and did we mention it's completely free?</h3>
  <p>We understand if you don’t want to take the time. The benefits of discovering your true self and getting help finding a career path that feels made just for you might sound too good to be true. Or maybe it's not.</p>

  <% if current_user %>

    <!-- Hasn't begun personality test -->
    <% if current_discovery_user.progress == 0 %>

      <p><%= link_to "See Which Jobs Fit <em>You</em> (soon!)".html_safe, "#" %></p> 

    <!-- Has completed self-guided test -->
      <% elsif current_discovery_user.ei.present? %>
        <%= link_to "See Your Results", results_path, class: "button darker-blue big call" %>

    <!-- Has begun personality test but isn't yet finished -->
    <% elsif current_discovery_user.progress < 100 && current_discovery_user.progress > 0 %>
      <p><%= link_to "See Which Jobs Fit <em>You</em>".html_safe, question_path(@go_to_next_question) %></p>

    <!-- Completed Personality Test -->
    <% else %>
      <div class="row centered">
        <p><%= link_to "See Which Jobs Fit <em>You</em>".html_safe, results_path, class: "button darker-blue big call" %></p>
      </div>
    <% end %>

  <!-- Not Logged In -->
  <% else %>
    <p><%= link_to "See Which Jobs Fit <em>You</em>".html_safe, main_app.signup_path %></p>
  <% end %>
</div>

Want to Improve Your Designs?

Get my best articles, design tips and other resources once a week.

If I don't help you improve your designs, unsubscribe at any time.

Sign Up For Free

×

Sign In

×