For one of my class we had to create a web component that allows you to sort a list of questions. There were a lot of steps to be taken to finish our this whole project.

The Process:

To start out, we created a layout of how we wanted our design to look

• Having the layout done first made it easy for our group to have something to work off of
• knowing what needs to be done made it easier when programming by ourselves since the layout was already done

Then our team started by making on plan on how to tackle this problem:

• What is the best way to go about solving this problem?
• Can we divey this work up?
• What is the best strategy to programming the sorting to work right?

Through the following few weeks of our project we did 2 key things to have this project run smooth:
1) Met in person twice a week to work on the project together
2) Always communicated with each other to know what everyone was working on

We were giving a comp from our professor so the outline did not take to much time. This is the standards template we are working with.

The end goal is for this template to be able to sort questions using the arrows and dragging information to different slots all shown in the template above. This was created on a basis of using Arrays that would store and sort the lists from the template. Since the Arrays created a sorted list, we were able to add on a shuffle and check answers function which has potential to be very useful for the users.

The picture shown above shows different ways we want to make our application more user interactive. To show user's when they are correct and incorrect, we implemented a color coded system. When the user answers the question correctly, that text box will turn green. On the other hand, if you answer wrong, the text box turns red. We also have a tallied count at the bottom of the sorting questions template. It shows you the number of questions that the user was correct with. Giving users different forms of feedback is really beneficial to creating a more interactive and enjoyable environment.

Breaking this down in a coding point of view, these are ways we were make this able to work:

  constructor() {
    super();
    this.title = "Gimme a title!";
    this.checked = false;
    this.questionAmount = this.children.length;
    this.correctNum = 0;
    this.correctOrder = [];
    this.currentOrder = [];

    console.log(`Children: ${this.questionAmount}`);

    //correct order of question are stored based on sq-question input
    this.querySelectorAll("sq-question").forEach(node => {
      this.correctOrder.push(node);
    });

    console.log('correct order:');
    console.log(this.correctOrder);

    //shuffles questions upon load for user
    this.shuffleQuestions();
  }

From our code shown above, you can view how we tally the correct and incorrect in which it then gets pushed to the users to view.

We tried to find the most simple way to code for this project to help make the compile and run time quicker for the users. I find this to be a better approach because a faster run time is always very important to users. If your run time is to slow, many people will not give your application the time of day.

If you would like to see more throughly what our group has done with this project please check out our project