Hello everyone, i need any help

i passed in the step5 superbadge aura components specialist however when i click on picture, it's no Highlight the Selected Boat.

my code:

BoatSelect.evt

<aura:event type="APPLICATION">
    <aura:attribute name="boatId" type="String"/>
</aura:event>

BoatTile.cmp

<aura:component implements="flexipage:availableForAllPageTypes" access="global">
    <aura:registerEvent name="boatSelect" type="c:BoatSelect"/>
    <aura:attribute name="boat" type="Boat__c"/>
    <aura:attribute name="selected" type="Boolean" default="false"/>
    <lightning:button class="{!v.selected ? 'tile selected' : 'tile'}" onclick="{!c.onBoatClick}">
        <div style="{!'background-image: url(\'' + v.boat.Picture__c + '\')'}" class="innertile">
            <div class="lower-third">
                <h1 class="slds-truncate">{!v.boat.Contact__r.Name}</h1>
            </div>
        </div>
    </lightning:button>
</aura:component>

BoatTileController.js
({
    onBoatClick: function(component, event, helper) {
        var boatId = component.get('v.boat.Id');
        var createEvent = component.getEvent('boatSelect');
        createEvent.setParams({
            'boatId': boatId
        });
        createEvent.fire();
        console.log('BoatTile=boatId: ' + boatId);
    }
})

BoatTile.css

.THIS.tile {
    position: relative;
    display: inline-block;
    width: 200px;
    height: 220px;
    padding: 1px !important ;
    margin: 7px;
}
.THIS.tile.selected {
    border: 3px solid rgb(0, 112, 210);
}
.THIS .innertile {
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    width: 100%;
    height: 100%;
}
.THIS .lower-third {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    color: #FFFFFF;
    background-color: rgba(0, 0, 0, .4);
    padding: 6px 8px;
}

BoatSearchResult.cmp
<aura:component controller="BoatSearchResults" implements="force:appHostable,flexipage:availableForAllPageTypes,flexipage:availableForRecordHome,force:hasRecordId,force:lightningQuickAction" access="global">
    <aura:handler name="init" value="{!this}" action="{!c.doInit}"/>
    <aura:handler name="BoatSelect" event="c:BoatSelect" action="{!c.onBoatSelect}"/>
    <aura:registerEvent name="formsubmit" type="c:FormSubmit"/>
    <aura:attribute name="boats" type="Boat__c[]"/>
    <aura:attribute name="boatTypeId" type="String"/>
    <aura:attribute name="selectedBoatId" type="String"/>
    <aura:method name="search" action="{!c.doSearch}">
        <aura:attribute name="boatTypeId" type="String"/>
    </aura:method>
    <lightning:layout horizontalAlign="center" verticalAlign="center" multipleRows='true'>
        <aura:if isTrue="{!v.boats.length > 0}">
            <lightning:layoutItem flexibility="grow">
                <aura:iteration items="{!v.boats}" var="boat">
                    <c:BoatTile boat="{!boat}" selected="{!boat.Id == v.selectedBoatId ? true : false}"/>
                </aura:iteration>
            </lightning:layoutItem>
            <aura:set attribute="else">
                <lightning:layoutItem class="slds-align_absolute-center" flexibility="auto" padding="around-small">
                    <ui:outputText value="No boats found"/>
                </lightning:layoutItem>
            </aura:set>
        </aura:if>
    </lightning:layout>
</aura:component>

BoatSearchResultController.js
({
    doInit: function(component, event, helper) {
        helper.onSearch(component);
    },
    doSearch: function(component, event, helper) {
        var params = event.getParam('arguments');
        component.set('v.boatTypeId', params.boatTypeId);
        helper.onSearch(component);
    },
    onBoatSelect: function(component, event, helper) {
        var params = event.getParam('boatId');
        component.set('v.selectedBoatId', params);
    }
})