Coder Social home page Coder Social logo

Add Template Loops about khan-exercises HOT 18 CLOSED

khan avatar khan commented on August 12, 2024
Add Template Loops

from khan-exercises.

Comments (18)

pappy74 avatar pappy74 commented on August 12, 2024

I have to admit, I never really understood why the parameter order of the 'each' callback in jquery was 'index, value'. And now you're doing the same here.

Seems like you need the index very rarely, yes?

The django template loop is quite elegant. Within a loop, you have access to a special object 'loop'. That object has values like 'counter', 'first', 'last', etc.

from khan-exercises.

sophiebits avatar sophiebits commented on August 12, 2024

That'd be cute:

<div data-loop="items">Position: <var>loop.index</var> Value: <var>loop.value</var></div>

(And while we're at it, why is jQuery.map backwards from the other iterators?)

from khan-exercises.

pappy74 avatar pappy74 commented on August 12, 2024

That's the idea, but I do still like being able to name the value of the iterated object.

<div data-loop="items(vehicle)">You own a <var>vehicle</var>.</div>

To help with nested loops, you could allow access to the loop object via a second name, "loop-LISTVAR".

<var id="vehicles">[ "car", "boat" ]</var>
<var id="people">[ "Jane", "Rumplestilskin"]</var> 
<div data-loop="people(person)">
    <div data-loop="vehicles(vehicle)">
        Person #<var>loop-people.index</var> (<var>person</var>): Vehicle #<var>loop-vehicles.index</var> (<var>vehicle</var>)
    </div>
</div>

from khan-exercises.

sophiebits avatar sophiebits commented on August 12, 2024

I'm just unsure how much I like the collection(item) style with parentheses because it looks a lot like a method call but isn't one.

Perhaps data-loop="people/person"? That feels marginally better to me.

from khan-exercises.

pappy74 avatar pappy74 commented on August 12, 2024

good point. Maybe even data-loop="person in people"

Or could use a second attribute if you specifically want it named (otherwise default to accessing via loop.value):

<div data-loop="items" data-loop-each="person">

from khan-exercises.

osnr avatar osnr commented on August 12, 2024

An important use case could be generating random wrong choices, like you'd need to for a port of this code from solving_for_the_y-intercept:

for (var i=0; i<5; i++)
{
var b_num = y1*slope_denominator-x1*slope_numerator;
var b_den = slope_denominator;
var bad_b_num = get_random();
var bad_b_den = get_random();

while (b_num*bad_b_den==b_den*bad_b_num || bad_b_den==0)
{
    bad_b_den = get_random();
}
//possibleAnswers.push('m='+format_fraction(bad_m_num, bad_m_den));
Exercise.possibleAnswers.push('b='+format_fraction(bad_b_num, bad_b_den));
}

from khan-exercises.

sophiebits avatar sophiebits commented on August 12, 2024

Right, I already mentioned this to John (see #42).

from khan-exercises.

jeffinitelyjeff avatar jeffinitelyjeff commented on August 12, 2024

It would also be nice to have while loops and simple for loops (instead of iterator-based for each loops; I can't think of what the alternative is called). Maybe we could just read in data-loop and see what kind of loop it's specifying, like:

<div data-loop="for (var i = 0; i < 10; i++)">
<div data-loop="for (person in people)">
<div data-loop="while (a !== b)">

This could, I guess be unified with data-if to create some kind of generic data-control which we check to see if it's specifying an if, elseif, loop, etc. Not sure if that'd be a desired direction, though.

from khan-exercises.

sophiebits avatar sophiebits commented on August 12, 2024

I actually really like that. (Except int should be var and also for/in is weird sometimes.)

from khan-exercises.

jeffinitelyjeff avatar jeffinitelyjeff commented on August 12, 2024

yeah. I guess I also forgot about labeling the index, so maybe iterator-based loops could be something like

<div data-loop="each (people, i, person)">

or

<div data-loop="for ((i, person) in people)">

from khan-exercises.

sophiebits avatar sophiebits commented on August 12, 2024

Yuck, now I don't really like it any more. It was nice before because it was the same as standard JS loop syntax.

from khan-exercises.

jeffinitelyjeff avatar jeffinitelyjeff commented on August 12, 2024

well, standard js loop syntax doesn't allow reference to the index, which we'd want somehow. I still think it's better than

<div data-loop="people/i/person">

from khan-exercises.

pappy74 avatar pappy74 commented on August 12, 2024

so, standard JS syntax, coupled with the aforementioned loop variable?

from khan-exercises.

pappy74 avatar pappy74 commented on August 12, 2024

That is, assuming people is an array:

<div data-loop="for (person in people)">
   Person #<var>loop.index</var>: <var>person</var>
</div>

from khan-exercises.

jeffinitelyjeff avatar jeffinitelyjeff commented on August 12, 2024

I don't like that solution that much. It looks elegant, but it doesn't generalize easily to nested loops. I was thinking something like this instead:

<div data-loop="for (person in people)" data-loop-index="i">

from khan-exercises.

pappy74 avatar pappy74 commented on August 12, 2024

It would be just as easy to specify the magic var:

<div data-loop="for (person in people)" data-loop-var="loopPeople">

One reason why I harp on this is that it's very similar to the Django template loop tag. Which is what is being used on the backend.

The loop variable can also have other useful properties: see https://docs.djangoproject.com/en/dev/ref/templates/builtins/?from=olddocs#for for examples.

from khan-exercises.

robertyates avatar robertyates commented on August 12, 2024

I think I need this for issue #101 where I need a variable number of hints depending on the length of the polynomial. Thoughts?

from khan-exercises.

sophiebits avatar sophiebits commented on August 12, 2024

Presumably. I think that @jeresig is almost done with this.

from khan-exercises.

Related Issues (20)

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.