Welcome to the Treehouse Community

Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community!

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.

Start your free trial

Python

Daniel Bowen
Daniel Bowen
8,127 Points
Posted by Daniel Bowen
Daniel Bowen
8,127 Points

Radio button encircles all of the choices

I'm not sure whats causing this. I checked my code against what is seen in the video, and if I choose the left most item that isn't the 'nothing' image, there is an oval encompassing all of the choices. if I choose the right most, it just encompasses the right one like a proper radio button. Each choice from left to right makes it smaller.

Daniel Bowen
Daniel Bowen
8,127 Points
Daniel Bowen
Daniel Bowen
8,127 Points

{% for choice in choices %} <input type="radio" id="{{category}}-{{choice}}_icon" name="{{category}}" value="{{choice}}" {% if saves.get(category) == choices%} checked{%endif%}> <label for="{{category}}-{{choice}}_icon"><img src="/static/img/{{category}}-{{choice}}.svg" </label> {% endfor %}

Sorry for jumble of code, no formatting it seems

3 Answers

Martin Cornejo Saavedra
Martin Cornejo Saavedra
18,132 Points
Martin Cornejo Saavedra
Martin Cornejo Saavedra
18,132 Points

Use html format. The error is inside the if statement. Change "choices" for "choice" as the following code.

<input type="radio" id="{{category}}-{{choice}}_icon" name="{{category}}" value="{{choice}}" {% if saves.get(category) == choice%} checked{%endif%}>
Martin Cornejo Saavedra
Martin Cornejo Saavedra
18,132 Points
Martin Cornejo Saavedra
Martin Cornejo Saavedra
18,132 Points

Anyway, here's the whole code for the builder.html:

{% extends "layout.html" %}

{% block content %}
<!--Build Area -->
<form action="{{ url_for('save') }}" method="POST" class="wrap no-top">
    <div class="grid-100 row">
        <div class="grid-30">
            <div class="title">
                <input type="text" name="name" value="{{ saves.get('name', '') }}">
            </div>
        </div>
        <div class="grid-70">
            <div class="colors">
              {% for color in options['colors'] %}
                <input type="radio" id="{{ color }}" name="colors" value="{{ color }}"
                  {% if saves.get('colors') == color %}checked{% endif %}>
                <label for="{{ color }}"></label>                
              {% endfor %}
              <button class="btn">Update</button>
            </div>
        </div>
        <div id="bear" class="grid-100 bg-{{ saves.get('colors') }}">
            <div class="bear-body"><img src="/static/img/bear_body.svg" /></div>
          {% if saves.get('footwear') %}
            <div class="footwear"><img src="/static/img/bear_items_footwear-{{ saves['footwear'] }}.svg"></div>
          {% endif %}
          {% if saves.get('pants') %}
            <div class="pants"><img src="/static/img/bear_items_pants-{{ saves['pants'] }}.svg"></div>
          {% endif %}
          {% if saves.get('shirts') %}
            <div class="shirt"><img src="/static/img/bear_items_shirts-{{ saves['shirts'] }}.svg"></div>
          {% endif %}
            <div class="head"><img src="/static/img/bear_face.svg" /></div>
          {% if saves.get('glasses') %}
            <div class="glasses"><img src="/static/img/bear_items_glasses-{{ saves['glasses'] }}.svg"></div>
          {% endif %}
            <div class="nose"><img src="/static/img/bear_nose.svg" /></div>
          {% if saves.get('hat') %}
            <div class="hat"><img src="/static/img/bear_items_hat-{{ saves['hat'] }}.svg"></div>
          {% endif %}
        </div>
        <div class="items">
          {% for category, choices in options.items() %}
          {% if category != 'colors' %}
          <div class="grid-100 row">
            <div class="grid-20">
              <p class="category-title">{{ category.title() }}</p>                
            </div>
            <div class="grid-80">
              <input type="radio" id="no_{{ category }}_icon" name="{{ category }}" 
                value="" {% if not saves.get(category) %}checked{% endif %}>
              <label for="no_{{ category }}_icon"><img src="/static/img/no-selection.svg"></label>
              {% for choice in choices %}
              <input type="radio" id="{{ category }}-{{ choice }}_icon" name="{{ category }}" value="{{ choice }}"
                {% if saves.get(category) == choice %}checked{% endif %}>
              <label for="{{ category }}-{{ choice }}_icon"><img src="/static/img/{{ category }}-{{ choice }}.svg"></label>
              {% endfor %}
            </div>              
          </div>
          {% endif %}
          {% endfor %}
        </div>
    </div>
</form>

{% endblock %}
Daniel Bowen
Daniel Bowen
8,127 Points
Daniel Bowen
Daniel Bowen
8,127 Points

Changed the choices to choice, didn't fix it, but copying and pasting your code did. Thanks.