Angularjs create navigation bar for quiz - javascript

I'm new in Angular and I need to make Navigation bar for quiz. Each question has it's own checkbox and when it's pressed, this question's link in navigation somehow changes (e.g. background turns red). So I want to make navigation as link array, but I have no idea how to change each link according to checked checkbox. As I understand it, we have one array, clicking on checkbox we take from this array an item and put it to another array and then this array give to links, but how to write this functions? Any idea?

I can recommend you : http://www.asp.net/web-api/overview/getting-started-with-aspnet-web-api/build-a-single-page-application-spa-with-aspnet-web-api-and-angularjs
In this lab they are building nearly the same application you are talking about

Related

How to target a list of DOM elements within React

So I'm currently doing Brad Traversys 50 projects in 50 days, but I wanted to do it built in Next.js with React for practice, as that's what I use at my job.
As you can see from me posting here, it's not going so well! I'm already running into road blocks.
I'm trying to create a set of cards, that when one is clicked, it expands out. Outside this, if there is a card already expanded, and another card is clicked, I need the previously expanded card to collapse, whilst the card currently clicked expands.
I'm currently trying to work off an active state, and passing that down to the Panel props, but obviously that just sets all the flex's to be the same and nothing happens. But when I try to define the active useState inside the Panel component, it works, but I can't then target the other active states in the other Panels, to set them to false.
You can see my code on this CodeSandbox https://codesandbox.io/s/nifty-goldberg-5noi4?file=/pages/expanding-cards.jsx
You can see the correct functionality here https://50projects50days.com/projects/expanding-cards/
What's the best way to go about this?
You need a logic like Accordion control in Material UI. As in my comment, here is the example.
https://material-ui.com/components/accordion/#controlled-accordion

Anchor Jumping across the section within page

I am trying to implement "Anchor Jumping" functionality using JavaScript and Angular 2 in my application, Means user can jump across the section within a page.
As per the client requirement, User can jump(Navigate) the section using of pressing Ctrl+Shift+Left/Right Arrow key.
Here, I add one snap to clear out the question as below.
As an example, Suppose first time focus on Menu and user press the Ctrl+Shift+Right Arrow at that time focus should be go to next element item(i.e. Breadcrumb section or any section).
I am very confuse about, How to manage the dynamic loading content? (How can I count this dynamic content in my section?)
Please suggest any idea to achieve this functionality.
What you need is a focus manager. I wouldn't bother writing one from scratch, Angular Focus Manager is one example of how to solve this problem. It also incorporates Mousetrap.js, which adds shortcut directives.
Your dynamic content can always be wrapped in something (even a div) that has its focus managed.
I hope this helps!

Change an url on an image depending on something checked before

I am trying to make an E-commerce website. I'm using Wordpress/Woocomerce.
But the guy I am working for, wanted special pages with a really special design. So he asked me for something that I did.
But now the fact is that I have a problem with the attributes and adding it to the cart button.
So I'd like to find a way to change the url on the "add to cart" button, which is an image.
Is there anyway to make an url on a page ( not in the search bar, but in the code ) change if u check or uncheck something ?
Like a radio button or anything.
Also I'm looking for a cool way to keep the selected size white once I clicked on. Actually it's just an image with an invert effect on hover . And I just found a way to make all work with 1 page per size but it would be really could if I could change the link on the add to cart button change. I just dont know how to change it.
Here is the link : http://mtcdistrup.cluster003.ovh.net/black-onyx/
As you can see, if u click on S it loads another page and on the new page the add to cart button links straight to the good product.
I hope all is clear and that u can help me a bit.

How to design a dynamic menu

Basically, I'm making a google drive-esqe web app, that handles storage of user's notebooks and notes that are created in the app.
For my home screen, the user will see all of their notebooks rendered out and they will be clickable. When a user clicks on the item, the item highlights, as well as checking its respective checkbox (why we have both, I don't know.) and then a menu bar is supposed to appear at the top, giving the user options to perform upon that notebook/note.
The menu bar is par of a app-wide navigational bar, but the menu is strictly for the home page only.
The problem is in the functionality of some of the menu options. The way the app currently stands is that the user may select multiple items, but some menu options will disappear when doing so (e.g. Open will disappear as we only want one note opening at a time). I currently have no idea how to go about designing this. Mainly, I have no idea how to keep track of the number of highlighted items (will provide a snippet for the highlighting below), and no idea how to get the appropriate menu options to appear/disappear when appropriate. Right now, I have a menubar.ejs that holds all the menu titles, and it is included (<%-includemenubar.ejs %>) in the navigation bar that all screens have access too.
MenuBar.ejs
<ul class="menu">
<li>Home</li>
<li>Create</li>
<li>Open</li>
<li>Download</li>
<li>Share</li>
<li>Delete</li>
</ul>
Highlighting:
var itemSelect = function(){
$('.searchResult').click(function(){
$(this).toggleClass("highlighted");
var check= $(this).find('.checkbox');
check.prop('checked', !check.prop("checked"));
}
While this probably not the best way to go about this, its the only way I could think of at the time.
I'm really VERY new to all of these languages etc, so this is a pretty daunting task for me. Any help much appreciated! Hopefully I've provided enough information, but if I haven't, I'll do my best to specify more or add more where needed.
To get all items which are highlighted you can use the jquery selector:
$('.highlighted'); // returns an array of hightlighted items
$('.highlighted').length; // number of highlighted items
The questions a little vague but in terms of designing, try to think of the app in terms of views/contexts, if I have a note open what should be able to see do?

create radio buttons automatically from a list

I am writing a python web app for google app engine using jinja2 though my problem relates to HTML/javascript (jquery is good).
I have a menu guided by radio buttons. I have two columns that I want to permanently be there and I want the next three to be generated depending on what the user selects from the first two.
I understand somewhat how to generate the radio buttons automatically with JQuery (though any suggested resources would be great but I can probably figure it out) but my main question revolves around the fact that my final radio button has around 100 possibilities depending on the previous ones that are selected (only 3-5 will be displayed at a time mind you).
So my main question. Where should I store the names for the radio buttons and URLs that they will lead to? and how do I put these into the radio buttons as they are created?
Here is an image of what I want the final product to look like:
Thanks so much this is bending my mind for some reason!
Where are your 100 options stored now in javascript (front end)?
If all your options are stored on the front end you can implement your logic (which buttons to display based on the previous choices) on the front end. This would probably include an array of radio buttons. As you can see this could start getting unweildy to maintaint. Every time you want to update yoru logic you would have to manually update your js file.
If all the choices are stored in python/backend you will need to make an AJAX request from the front end to the backend. This can be done easily using jquery framework.
This request would include the choices the user makes. and it would return the correct radio buttons to display.

Categories