Simplify q-and-a extension

[Daniel Holbach]

Implement !!I image detection and placement. This is the second part of bug 1430735.

[Daniel Holbach (dholbach)]

<dpm> dholbach, ok, thanks. And how about changing the local-q-and-a extension to do the following: the syntax to use it to be !!QA instead of !!T (I'm thinking of having just one), make sure the enclosing div contains the text and any images, and add the class "question" to the enclosing div? To keep things simpler, I'm thinking of having just the one !!QA instead of both !!T and !!I, and then use some JavaScript to do any additional markup changes to th
<dpm> e image, similarly to how to do on the phone. I could have a go at the JS bit

[David Planella (dpm)]

So here's what I was thinking:

1. Rename the !!T syntax to !!QA
2. Use this markdown.

### Question !!QA
This is the answer.

We would allow only one image per question, which would be optional, but should be in its own line after the answer and not embedded.

3. Generate this markup

a) Preferred:

<div class="row qa">
  <div class="eight-col">
    <h3 id="question">Question</h3>
      <p>This is the answer.</p>
  </div>
  <div class="four-col last-col">
    <img alt="Alt text" src="./images/image.gif" />
  </div>
</div>

If there is no image in the question, then the whole <div class="four-col last-col">[...]</div> div element would not be present.

b) Alternatively, if the above proves to be too complex, then this would also work (it would mean more manipulation in JS, but should be doable:

<div class="row qa">
  <div class="eight-col">
    <h3 id="question">Question</h3>
      <p>This is the answer. <img alt="Alt text" src="./images/image.gif" /></p>
  </div>
</div>

4. Use JavaScript to do any other markup manipulation (I can help with that)

[Daniel Holbach (dholbach)]

ACK.

[Ubuntu Phone Apps Jenkins Bot (ubuntu-phone-apps-jenkins-bot)]

Fix committed into lp:help-app at revision 127, scheduled for release in help-app, milestone backlog