Skill improvements after taking quantum mechanics

This term I have take quantum mechanics and in this blog, I will reflect on how taking this course improve my academic skills, including constructing theoretical models, analytical techniques, approximation and numerical methods, design research projects and communicating physics. This course complies very well with the standards set by the American Association of Physics Teachers as an undergraduate course. In terms of constructing theoretical models, I learned how to analyze a microscopic problem by setting up a quantum mechanics model. In this process, the Schrodinger equation often serves as a good start. I have also made improvements on the analytical skills. I can analyze a problem from its Hamiltonian, its angular momentum, and its other invariants. In this process, linear algebra often helps me a lot. We covered a lot on the approximation and numerical methods. We have studied the shooting methods and the matrix diagonalization method. We studied those methods carefully, implemented them in Mathematica and solved problems with them. Towards the end of the term, we also designed research projects on our own. I studied the perturbations on a hydrogen atom. As a result of the study, we communicate the result by writing a paper on it. As for communicating physics, we had plenty of in class discussions that greatly helped our participations and interactions in the class.

Quantum Mechanics: numerical techniques

In this post, I am going to talk about what I learned from my exposure to numerical techniques.

I am taking quantum mechanics this term and during these weeks, we are exposed to numerical techniques to solve Schrodinger’s equation. In this process, I learned how to solve a Schrodinger’s equation numerically and two techiques were involved: the shooting method and the matrix diagonalization method.

The shooting method is a method that starts with knowing the value of the solution and the first derivative of the solution at some point and proceed from that point to get more of the solution. We assume linear relation locally for the solution and the first derive. When we know the first derivative, we can calculate the change of value of the next point from this point. Also, once we know the second derivative, we can calculate the first derivative at the next point by increasing or decreasing from this point. This process keeps going until we gets somewhere we feel sufficient to understand this system. On the other hand, matrix diagonalization method starts from choosing a basis which is the eigenstates of a known system. From that, we can expression the Hamiltonian in that basis and then get the eigenvectors of the Hamiltonian matrix when we choose a finite size of basis from the infinite. By finding out the eigenvectors and the eigenvalues of the matrix, we manage to get the eigenenergies and reconstruct the eigenstates of the system from the basis chosen. A shortcut that we could take is to split the Hamiltonian matrix into two parts: the parts with diagonal values as the eigenvalues of the chosen basis and whatever is left over from that. A good choice enables us to simplify the problem.

Bootstrap: use grid in inline forms

Today,  I am trying to put some bootstrap form controls into one line, and that gives me a bit of headache at first.

The Problem

I have a select box, an input box and a submit button. I want to put them into one line. I started by trying the class “inline-form“. However, that did not really work for me, as is shown in the screenshot below. The code is

<form class='inline-form'>
<select class="form-control" style='width:100%' id="sel1">
<option>1</option>
<option>2</option>
<option>3</option>
<option>4</option>
</select>
<input type="text" class="form-control" id="inlineFormInputGroup"       style='width:100%' placeholder="Username">
<button type="submit" class="btn btn-primary">Submit</button>
</form>

Trail 1: Removing ‘form-control’

We realize that the problem is in the class ‘form-control‘, which displays the elements as blocks. Thus, we tried to remove them (and the style width:100%). That did work: all the elements are on the same line. However, that removed all the css features of a bootstrap form, as is expected. Thus, we have to put the class back since using the style is the whole point of using Bootstrap. It did not work.

Trial 2: Using Grid System

The next thing we should try is the grid system, which is a triumph of Bootstrap that can is flexible for different screen sizes. The grid system divides a row into 12 columns and you can specify how many columns each element can take. Thus, if we use the form as a row and specify each element’s columns. It will lay in the same line.

However, that did not work with the form-control class. The elements are still displayed in different lines. The code is shown below. As we can see from the code, we put the form-control class back and added the grid system. The form is defined as a row and the select box has 3 columns, the input 3 column and the button 1 column. We did not use up the 12 columns but it should be fine. All elements should float on the left.

<form class='inline-form row'>
<select id="sel1" class='col-md-3 form-control'>
<option>1</option>
<option>2</option>
<option>3</option>
<option>4</option>
</select>
<input type="text"  id="inlineFormInputGroup"  placeholder="Username" class='col-md-3 form-control'>
<button type="submit" class="btn btn-primary form-control col-md-1'>Submit</button>
</form>

That did not work but put us on the right direction: using the grid system. We still know that it is the problem of the form-control class and now we have to deal with how to use the form-control class and the grid system together.

Solution

After playing with the code for a while. I tried adding <div> outside the elements so it will be the <div>s that directly interact with the grid system and act as an element in the system, not the form elements themselves, which have to carry the form-control class. It worked as a charm, as is shown in the screenshot below. The code is given below. Using <div> as the agent for the form elements to directly interact with the grid system worked as for putting the elements with form-control class onto the same line.

<form class='inline-form row'><form class='inline-form row'>
<div class='col-md-3'>
<select id="sel1" class='col-md-3 form-control'>
<option>1</option>
<option>2</option>
<option>3</option>
<option>4</option>
</select>
</div>
<div class='col-md-3'>
<input type="text"  id="inlineFormInputGroup"  placeholder="Username" class='col-md-3 form-control'>
</div>
<div class='col-md-1'>
<button type="submit" class="btn btn-primary form-control">Submit</button>
</div>
</form>