Welcome, Tester

    Thanks for dropping by. You were most likely linked here from a job posting and we really appreciate your enthusiasm!

    Please answer as many questions as you possibly can, trying to keep your time limit roughly within three hours. Those who complete more questions will be more likely to be contacted. You may use any web resources available to help you complete this test.

    Please do not navigate away from, or reload this page before submission or your answers will be lost.

    • Personal Details

    • HTML

    • CSS

    • SCSS

    • jQuery

    • PHP

    • WordPress

    • GIT

    • Submit

    Personal Details

    Please let us know your personal details so we can contact you.

    Skill Confidence

    Please uncheck any boxes you do not feel confident with.*

    HTMLCSSSCSSjQueryPHPWordpressGIT

    HTML

    Question 1

    Consider the following HTML code and choose the option that is most accurate.

    HTML

    <h3><a href=”#” target=”_blank”>Text</a></h3>

    Question 2

    Please describe everything that is semantically incorrect with the following code:

    HTML

    <div class=”navigation”>
    <span><a href=”#”>Link 1</a></span>
    <span><a href=”#”>Link 2</a></span>
    <span><a href=”#”>Link 3</a></span>
    </div>

    Question 3

    Please visit JSFiddle and create a new Fiddle which demonstrates a basic web page template with the following features, then provide the link to your Fiddle. Code only, visuals not required.

    • A W3C valid HTML page.

    • A local version of jQuery, and a remote CDN fallback version of the file linked in the head tag of the page.

    • A single stylesheet linked in the head tag of the page.

    • A semantically correct navigation area in the body tag, showing 'Home', 'About', and 'Contact'.

    • A single .js file linked in the footer of the page.

    CSS

    Question 4

    Please describe what each of the following CSS expressions indicate:

    30vw

    a + span

    div[^class="col"]

    li > a

    div:not(:first-child)

    Question 5

    Consider the following HTML and CSS. Where will the '.container:before' pseudoclass element appear, relative to .container?

    HTML

    <div class=”container”>
    </div>

    CSS

    .container {
    position: relative;
    }
    .container:before {
    position: absolute;
    left: 0;
    top: 0;
    width: 10px;
    height: 10px;
    background-color: red;
    }

    Question 6

    Please visit JSFiddle and create a new Fiddle which demonstrates a basic web page template with the following features, then provide the link to your Fiddle.

    • A single W3C valid HTML5 page.

    • Three columns which are of equal width and 100% window height, each with a different background colour.

    • Each column must contain a horizontally and vertically centered button.

    • This button must have a white background, black text and rounded corners.

    • The page must responsively display its columns below each other when viewed below 767px device width.

    SCSS

    Question 7

    You have three .scss helper files and one main .scss file for your project. The helper files are '_header.scss', 'body.scss' and '_footer.scss'.

    Your 'main.scss' file reads as below. Which of the following is correct?

    Structure of main.scss

    @import ‘header’;
    @import ‘body’;
    @import ‘footer’;

    Question 8

    You have a basic website with the scss helper '_globals.scss' and the primary .scss file 'main.scss'. 'main.scss' is compiled into 'main.css' and linked in the website's head tag.

    Please demonstrate how you would both include and call upon the following mixin (contained in '_globals.scss') in your 'main.scss' file:

    Structure of _globals.scss

    @mixin vertical-align($position: relative) {
    position: $position;
    top: 50%;
    -webkit-transform: translateY(-50%);
    -ms-transform: translateY(-50%);
    transform: translateY(-50%);
    }

    Question 9

    Complete Question 6 (CSS) and copy the JSFiddle to a new Fiddle. Convert it to use SCSS instead of CSS. Adjust your syntax accordingly and ensure the following points are in place. Then, provide a link to the new fiddle.

    • Each color used for each column background must be defined by a variable

    • The mixin from the previous question should be used or adapted to help vertically center your buttons in each column

    • All SCSS including media queries must be nested (child elements must be written inside parent elements)

    jQuery

    Question 10

    Consider the following jQuery code and select the most appropriate option to describe what is happening.


    var target = ‘.hero .main’,
    item = ‘.hero img’,
    count = 0;
    if( $(target).length ) {
    $(target).hover(function() {
    count = 0;
    $(item).each(function(index, element) {
    count += 100;
    $(element).stop().delay(count).slideDown();
    });
    }, function() {
    count = 0;
    $(item).each(function(index, element) {
    count += 100;
    $(element).stop().delay(count).slideUp();
    });
    }
    }

    Question 11

    Complete Question 6 (CSS) or 9 (SCSS) and copy the JSFiddle to a new Fiddle. Add jQuery and/or jQuery UI libraries and code which allow for the following items. Then, provide a link to the new fiddle.

    • Animate a picture of a lion (source from a Google search or use one of Scriptylion’s character images) from left to right as soon as the user moves their mouse.

    • Cause each column to bounce when hovered by the mouse, and to stop bouncing when the mouse leaves the column.

    PHP

    Question 12

    Consider the following PHP code. Which of the following options best reflects what's happening?

    PHP

    $name = (trim($posted_data['your-first-name'] .' '. $posted_data['your-last-name']));

    Question 13

    Consider the following PHP code. Please describe in the text box your best assessment of what each individual line accomplishes.


    function scriptylion_setup() {
    global $wp_rewrite;
    $wp_rewrite->set_permalink_structure('/%postname%/');
    wp_delete_post(1, TRUE);
    update_option( 'gmt_offset', '+8' );
    if (file_exists(WP_PLUGIN_DIR.'/hello.php')) {
    require_once(ABSPATH.'wp-admin/includes/plugin.php');
    require_once(ABSPATH.'wp-admin/includes/file.php');
    delete_plugins(array('hello.php'));
    }
    } add_action( 'after_switch_theme', 'scriptylion_setup');

    Question 14

    Please visit Ideone. Change the language to 'PHP' at the bottom left of the code box. Write code which accomplishes the following, then click 'Run' to retrieve a shareable link from the address bar and add your link below.

    • Properly register, enqueue and cache bust a file named ‘scriptylion.css’ located in /theme/styles

    • Properly register, enqueue and cache bust a file named ‘scriptylion.js’ located in /theme/scripts

    • Output the following HTML to the Wordpress footer: <p>I’m in the footer!</p>

    Wordpress

    Question 15

    You have attempted to update a plugin on a client’s Wordpress website. However, after waiting for 10 minutes, when visiting the website you see a maintenance message which shows no sign of disappearing, with the website otherwise unavailable.

    Select the method you believe is the quickest way to bring the website back online.

    Question 16

    A client’s Wordpress website has a custom post type labelled ‘portfolio’. A client has tasked you with adding a portfolio item to the main menu. Please outline the steps you take to:

    • Access the Wordpress menu area

    • Ensure portfolio items are visible

    • Add a portfolio item to the main menu

    Question 17

    A client has requested that you clone a Wordpress website for them from https://www.oldwebsite.com/ to a new URL https://www.newwebsite.com/ to make some modifications.

    You’ve correctly cloned the website as far as you can tell, but when visiting the new URL, you are redirected to the old URL.

    Please outline the steps you would take to force the cloned website to use the URL https://www.newwebsite.com/

    GIT

    Question 18

    When using GIT, which is the general best practice method to work to preserve changes made by other developers?

    Question 19

    You have been tasked with developing a website on a development server and deploying to a live server only when things are 100% ready. You are working with a group of three other developers on the development server. How many GIT branches do you feel are appropriate for your repository?

    Question 20

    You are working on a new feature for a website in a GIT branch labelled ‘change’, separate from the main branch ‘master’. However, your client mentions an urgent fix is required.

    Please describe the steps involved in using GIT to do the following. You can describe in terms of a GUI git client or via the command line, whichever you prefer:

    • Commit your changes in the change branch

    • Create a new branch to attend to the urgent fix

    • Switch to working on the newly created branch

    • Combine the newly created branch with the master branch

    • Remove the newly created branch

    • Switch back to your original change branch

    Please make sure you have answered all questions that you can. Submission is final and you cannot change your answers afterwards. You must also accept the agreement below to proceed.

    © 2024 Scriptylion, ABN 63 627 829 100

    Experts in web hosting – WHM, cPanel, Plesk

    Open 9am – 5pm AWST, Monday to Thursday*
    *Closed Fridays, public holidays and as advised

    Get in touch
    Call (08) 9467 2337

    This site is protected by reCAPTCHA and the Google Privacy Policy and Terms of Service apply.

    Roar at us

    Make it loud and proud - let us know exactly what we can do to help you!

    Error: Contact form not found.

    Don't like forms? Call us!

    08 9467 2337

    We are open 9AM to 5PM AWST MON-THU, closed Fridays & public holidays

    Roar at us now